以下示例后,JQuery自动完成功能不起作用

时间:2012-09-20 19:53:45

标签: jquery jsp jquery-autocomplete

所以我试图跟随多个例子,我无法让它发挥作用。我在JSFiddle和我自己的浏览器中尝试过,没有任何工作!我正在尝试为不同网站提供的药物做一个自动完成字段。

  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<script>
$(document).ready(function(){
    var drugs = ["Acepromazine (PromAce, Aceproject)", "Acetaminophen (Tylenol)",
        "Acetazolamide (Diamox, Dazamide)", "Acetylcysteine (Mucomyst)", 
        "Acetylsalicylic Acid (Aspirin)", 
        "Activated Charcoal (Toxiban, Liqui-Char, UAA Gel)", "Acyclovir (Zovirax)",
        "Albuterol (Proventil, Volmax, Ventolin)", "Allopurinol (Zyloprim)",
        "Alprazolam (Xanax)", "Amikacin (Amiglyde-V)", "Aminopentamide (Centrine)",
"Aminophylline",
"Amitraz (Mitaban, Preventic)",
"Amitriptyline HCl (Elavil)",
"Amlodipine Besylate (Norvasc)",
"Amoxicillin",
"Amoxicillin and Clavulanate (Clavamox)",
"Amphetamines",
"Amphotericin B",
"Ampicillin (Polyflex)",
"Antibiotic with Steroid Eye Medication",
"Apomorphine",
"Bismuth Subsalicylate (Pepto-Bismol)",
"Brinzolamide (Azopt)",
"Bromides",
"Buprenorphine (Buprenex)",
"Burow's Solution",
"Buspirone HCl (BuSpar)",
"Butorphanol Tartrate (Torbugesic, Torbutrol)",
"Calcitonin",
"Calcitriol (Vitamin D)",
"Calcium Gluconate",
"CAPSTAR (Nitenpyram)",
"Captopril (Capoten)",
"Carbamazepine (Tegretol)",
"Carboplatin (Paraplatin)",
"Carnitine (Carnitor)",
"Carprofen (Rimadyl)",
"Cefadroxil (Cefa-Tabs and Cefa-Drops)",
"Cefazolin (Kefzol, Ancef)",
"Cefixime (Suprax)",
"Cefotaxime (Claforan)",
"Cefotixin (Mefoxin)",
"Cefpodoxime Proxetil (Simplicef)",
"Ceftriaxone (Rocephin)",
"Cephalexin (Keflex)",
"Cephalothin",
"Chlorambucil (Leukeran)",
"Chloramphenicol (Chloromycetin)",
"Chlorhexidine",
"Chlorpheniramine Maleate (Chlor-Trimeton)",
"Chlorpromazine (Thorazine)",
"Cimetidine HCl (Tagamet)",
"Ciprofloxacin (Cipro, Ciloxan)",
"Cisplatin (Platinol-AQ)",
"Colchicine",
"Cyclophosphamide (Cytoxan, Neosar)",
"Cyclosporine (Atopica, Optimmune)",
"Cyclosporine Ophthalmic (Optimmune)",
"Cytarabine",
"Deracoxib (Deramaxx)",
"Derm Caps",
"Desmopressin (DDAVP)",
"Desoxycorticosterone (Percorten-V)",
"Dexamethasone"];
$("#drug_name_1").autocomplete({source:drugs});
});
</script>

<script type="text/javascript">

function addTreatment(){
}

function removeTreatment(){
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="increase" id="increase" value="Increase Drug Treatments" onclick="addTreatment()"/>
  <input type="button" name="decrease" id="decrease" value="Decrease Drug Treatments" onclick="removeTreatment()"/>
</form>
<form id="add_drugs" name="add_drugs" method="post" action="">
    <table width="100%" border="1" name="drug_treatment_table" id="drug_treatment_table">
          <tr>
            <th width="3%" scope="col">#</th>
            <th width="14%" scope="col">Drug</th>
            <th width="32%" scope="col">Special Directions </th>
            <th width="18%" scope="col">Quantity</th>
            <th width="12%" scope="col">How Often</th>
            <th width="8%" scope="col">Starting</th>
            <th width="13%" scope="col">Finishing</th>
          </tr>
          <tr>
            <td>1</td>
            <td>
            <input type="text" name="drug_name_1" id="drug_name_1" /></td>
            </tr>
         </table>
    </form>
    </body>
    </html>

我不明白为什么它不起作用。有什么想法吗?

谢谢! 乔恩

1 个答案:

答案 0 :(得分:1)

看起来就像是因为这两个脚本文件..

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

HTML无法理解脚本结束标记..它应该是自我关闭 ..

试试这个

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js" />

另外

<script  type="text/javascript">
     $(document).ready(function(){

检查FIDDLE ..省略脚本文件时工作正常..