JQuery自動完成主題框未正確放置

因此我正在嘗試JQuery的主題，並且在放置時遇到了一些問題。如果不添加從網站下載的jquery自定義主題，當我加載樣式表（爲了擺脫項目符號列表）時，自動完成框加載到文本框下方（請參見圖1），它將加載文本框的左上角窗戶。的代碼如下：樣式表我加入：<link href="style/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />JQuery自動完成主題框未正確放置

我添加樣式表的代碼：

<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>

的圖像是如下： The bullet list is correct position but ugly The list is better looking but in the wrong position

任何有任何想法如何讓自動完成文本框出現在正確的位置？

謝謝！ Jon

來源

2012-09-20 Jon

我一直都在使用它，從來沒有任何問題。雖然我使用的是不同的版本（我懷疑你的jQuery用戶界面和jQuery UI的主題的版本不兼容的JS似乎舊）：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

您還需要在jQuery UI的主題，你似乎有雖然我沒有檢查它的有效性。我通常使用ui-lightness主題，一切正常。

來源

2012-09-20 22:03:10 ramsinb

那一定是它！非常感謝！！！ – Jon

JQuery自動完成主題框未正確放置

回答

相關問題