自动完成一个包含ID和值的下拉列表

Question

我想自动完成一个下拉列表。

这是我JSON字符串：

[{ “ID”：1， “名称”： “大卫”}，{ “ID”：2， “名称”： “保罗”} ]

这是我输入：

<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对象的“标签”性质，其中Autocompleter用来寻找匹配

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