自动完成，在退格和文本不可见之前不显示选项 [英] autocomplete, not showing options until backspace and text is not visible

问题描述

我在这里创建了一个JSfiddle http://jsfiddle.net/8nzty/
code here ： -

ive created a JSfiddle here http://jsfiddle.net/8nzty/ code here:-

<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开头的项目列表
我点击一个选项
零件号和描述是自动填充的

Whats supposed to happen: I type h and see a list of items beginning containing h I click an option part no and description are autofilled

发生了什么：
i类型h，没有任何反应
i hit退格时出现一个没有可见文本的下拉列表（可能是白色？）鼠标悬停时
我看到文本显示在名称框中，单击一个并按预期自动填充。

whats happening: i type h, nothing happens i hit backspace a dropdown appears with none visible text (maybe its white?) on mouseover i see text appear in the name box, click one and its autofilled as expected.

推荐答案

请参阅小提琴

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

You almost got it. The issue is that you don't provide a way to show the options on the screen. You're using an array of JSON objects, so the widget needs to be told what data and how to display it.

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

到自动完成小部件的末尾解决这个问题。

to the end of the autocomplete widget solves the issue.

这篇关于自动完成，在退格和文本不可见之前不显示选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！