JQuery 자동 완성 테마 상자가 올바르게 배치되지 않았습니다.

그래서 JQuery 용 테마를 실험하고 있는데 배치 문제가 있습니다. 웹 사이트에서 다운로드 한 jquery 사용자 정의 테마를 추가하지 않으면 autocomplete 상자가 텍스트 상자 아래에로드됩니다 (이미지 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와 UI와 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 자동 완성 테마 상자가 올바르게 배치되지 않았습니다.

답변

관련 문제