使用 id 和 value 自动完成下拉列表

Question

我想自动完成下拉列表。

这是我的 json 字符串:

[{"ID":1,"Name":"david"},{"ID":2,"Name":"Paul"}]

这是我的输入:

    <input type="text" id="tbNames" />

这是我的 javascript:

    //datas variable contains the json string
    function BindNames(datas) { 
        $('#tbNames').autocomplete({
            source: datas,
            minLength: 0,
            scroll: true,
            select: function (event, ui) {
                $("#tbNames").val(ui.item.Name);
                return false;
            } 
        }).focus(function () {
            $(this).autocomplete("search", "");
        });
    }

问题是，当我点击 'tbNames' 输入时，会显示下拉列表，但不会显示其中的名称，但列表中有名称，因为当我点击下拉列表时两个名字之一显示在我的输入中。

http://jsbin.com/wudidaqapo/1/edit?html,css,js,console,output

感谢您的帮助。

Answer 1

试试这个：

 function BindNames() {
             var datas=[{"ID":1,"Name":"david"},{"ID":2,"Name":"Paul"}];

            $('#tbNames').autocomplete({

               source: function (request, response) {
                response($.grep(($.map(datas, function (v, i) {

                return {
                    label: v.Name,
                    value: v.ID
                };
               })), function (item) {
                  return item.label;
               }));
               },
              minLength: 0,
            scroll: true,

    }).focus(function () {
            $(this).autocomplete("search", "");
        });
}

Answer 2

请查看它是否有助于 you.please 在您的 json 对象中使用 'label' 属性，自动完成器使用它来查找匹配项

[{"ID":1,"Name":"david","label":"david"},{"ID":2,"Name":"Paul","label":"Paul"}]

使用 id 和 value 自动完成下拉列表

Autocomplete a Drop down List with id and value

html

javascript

jquery

jquery-autocomplete