2014-01-14 2 views
0

필자는 http://jsfiddle.net/8nzty/ 코드 여기 여기 JSfiddle을 생성 : - 가정 뭐죠자동 완성, 옵션이 표시되지

<script> 
$(document).ready(function() { 
    $(".items").click(function() { 
     $(this).val(''); 
    }); 
    var items = [{ "ID": 1, "Name": "HP DL360p", "PartNo": " 670638-425", "Description": "" }, { "ID": 2, "Name": "Samsung 840 Pro 256GB", "PartNo": "", "Description": "256GB SSD" }, { "ID": 3, "Name": "HP MSA P2000", "PartNo": "AW568A", "Description": "" }, { "ID": 4, "Name": "HP BL460c G6", "PartNo": null, "Description": "HP G6 Blade" }] 
    $("#Name").autocomplete({ 
     minLength: 0, 
     source: items, 
     focus: function (event, ui) { 
      $("#Name").val(ui.item.Name); 
      return false; 
     }, 
     select: function (event, ui) { 
      $("#Name").val(ui.item.Name); 
      $("#PartNo").val(ui.item.PartNo); 
      $("#Description").val(ui.item.Description); 
      return false; 
     } 
    }); 
}) 
</script> 
<table> 
    <tbody> 
     <tr> 
      <td><span class="ui-helper-hidden-accessible" role="status" aria-live="polite">4 results are available, use up and down arrow keys to navigate.</span><input name="Name" class="items ui-autocomplete-input valid" id="Name" type="text" value="Item Name" autocomplete="off"></td> 
      <td><input name="PartNo" class="items" id="PartNo" type="text" value="Part Number"></td> 
      <td><input name="Description" class="items" id="Description" type="text" value="Description"></td> 
      <td><input name="cmd" class="blue-button" id="btnAddItem" type="submit" value="+"></td> 
      <td><input name="cmd" class="blue-button" id="btnRemoveItem" type="submit" value="-"></td> 
     </tr> 
    </tbody> 
</table> 

일이 : 나는 시간을 입력하고 항목의 목록이 포함 된 시작 참조 시간 내가 부품 번호 및 설명은 뭐죠 일어나는

자동 완성되지 않은 옵션을 클릭 : 내가 시간을 입력 을, 아무것도 난 아마 (내가 드롭 다운이 없음 보이는 텍스트로 표시 백 스페이스를 누르 발생하지 ts white?) on mouseover 이름 상자에 텍스트가 나타나면 하나를 클릭하고 예상대로 자동 채우기를 클릭하십시오.

답변

2

Fiddle 당신은 거의 그것을 가지고 참조하십시오. 문제는 화면에 옵션을 표시하는 방법을 제공하지 않는다는 것입니다. JSON 객체 배열을 사용하고 있으므로 위젯은 어떤 데이터와 어떻게 표시할지 알려줘야합니다.

$("#Name").autocomplete({ 
    //existing widget settings 
}) 
.data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
    .append("<a>" + item.Name + "<br>" + item.Description + "</a>") 
    .appendTo(ul); 
}; 

autocomplete 위젯 끝 부분에서 문제가 해결되었습니다.

+0

아하하지만 내가 h를 입력하면 h 옵션이 표시되지 않습니다. 옵션을 보려면 backspace를 눌러야합니다. – AlexW

+0

안녕하세요, 위를 보았습니까? 당신이 입력을 시작하면 자동 완성 doesnt 시작, 당신은 입력 한 backspace 아무것도 다시 다음 메뉴가 나타납니다, 도와 줘서 고마워요. – AlexW

관련 문제