自动完成，在退格和文本不可见之前不显示选项

我在这里创建了一个JSfiddle http://jsfiddle.net/8nzty/代码： –

 $(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; } }); })  
 
 
 
4 results are available, use up and down arrow keys to navigate.
 
 
 
 
 
 
  

应该发生什么：我键入h并查看开始包含h的项目列表我单击选项部分no并且描述是自动填充的

发生什么事情：我输入h，没有任何反应我点击退格时，鼠标hover时出现没有可见文本的下拉列表（可能是白色？）我看到文本出现在名称框中，单击一个并按预期自动填充。

Answer 1

见小提琴

你几乎得到了它。 问题是您没有提供在屏幕上显示选项的方法。 您正在使用JSON对象数组，因此需要告诉窗口小部件有哪些数据以及如何显示它。

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

到autocomplete小部件的末尾解决了问题。