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

Question

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

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

应该发生什么:我输入 h 并看到包含 h 开头的项目列表我点击一个选项零件编号和描述会自动填充

发生了什么:我输入 h，没有任何反应我按下退格键，出现一个下拉菜单，没有可见的文本(也许是白色的？)鼠标悬停时，我看到名称框中出现文本，单击其中一个即可按预期自动填充。

Answer 1

参见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小部件的末尾解决了这个问题。