jQuery的自動完成

我對遠程的jQuery autocompete問題jQuery的自動完成

我以這種格式從服務器獲取一個JSON對象現在

[{"id":"4cd8d3b37adf3515c800003e","name":"University of Alberta"}, 
{"id":"4cd8d3b37adf3515c800003f","name":"Athabasca University"}, 
{"id":"4cd8d3b37adf3515c8000040","name":"University of Calgary"}, 
{"id":"4cd8d3b37adf3515c8000041","name":"University of Lethbridge"}, 
{"id":"4cd8d3b37adf3515c8000042","name":"Mount Royal University"}, 
{"id":"4cd8d3b37adf3515c8000043","name":"University of Toronto"}, 
{"id":"4cd8d3b37adf3515c8000045","name":"Queens University"}, 
{"id":"4cd8d3b37adf3515c8000046","name":"University of Waterloo"}, 
{"id":"4cd8d3b37adf3515c8000047","name":"McGill University"}, 
{"id":"4cd8d3b37adf3515c8000048","name":"University of British Columbia"}, 
{"id":"4cd8d3b37adf3515c8000049","name":"University of Saskatchewan"}, 
{"id":"4cec8ead7adf3502a100001f","name":"University of Alberta"}]

我需要做的僅僅是顯示在大學的名字自動完成列表並在用戶選擇大學時在一個隱藏字段中填充相應的ID。

我試着用這個json對象移動aroung formatResult和formatItem，但無法弄清楚如何自動完成。

如果有人解釋如何應用jQuery的自動完成的formatResult和formatItem方法與JSON對象

感謝

來源

2010-12-13 Gagan

動態數據源使用C＃的WebMethod看到這個職位：http://stackoverflow.com/a/35620970/5978806 – Husen 2016-02-25 07:37:00

我做同樣的事情，但我也有我的結果圖像這將是有益的。正如你所看到的，我的代碼支持多種選擇。

formatItem: function (row, i, n) { 
      return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.DisplayName + '</td></tr></table>'; 
     }, 
formatResult: function (row, i, n) { 
      return row.Id; 
     } 
}).result(function (event, data, formatted) { 
     var results = $("#selectedItems").val(); 
     $("#selectedItems").val(results + ";" + data.Id) 
    });

所以對於你，我會嘗試這個

formatItem: function (row, i, n) { 
      return '<span>' + row.name+ '</span>'; 
     }, 
formatResult: function (row, i, n) { 
      return row.id; 
     } 
}).result(function (event, data, formatted) { 
     $("#myHiddenField").val(data.id) 
    });

編輯：增加的結果函數把ID爲隱藏字段

來源

2010-12-13 14:52:53 Josh

感謝約什快速響應。但是，當我按照你所說的那樣行事時，效果不佳。我有formatItem和formatResult下面 \t \t formatItem給出：功能（行，I，N）{ \t \t \t的console.log（行）; \t \t \t return row.name; \t \t}， \t \t formatResult：功能（行，I，N）{ \t \t \t返回row.name; \t \t} < 我只從格式項目中的console.log中獲得一個日誌。日誌類似於[「[{」id「：」4cd8d3b37adf3515c800003e「，」name「：」University of Alberta「}，........]」]。如果我沒有錯，日誌被打印出來打印json對象內的所有元素。 – Gagan 2010-12-14 06:03:41

我也認爲formatItem的行arg沒有以正確的格式獲取數據。 – Gagan 2010-12-14 06:08:15

可以使用的getJSON來獲取數據我然後用一些這樣的東西使它自動同步

<body> 
    <br /><br />API Reference: <input id="example" /> (try "U")<br /><br /> 
    ID for selectet university <span id="UniID"></span> 
    <script type="text/javascript"> 
     $(function() { 
      $.getJSON('JSonUni.txt' , function(autoData) { // Get the data for autocomplite 
       $("#example").autocomplete(autoData, { 
        formatItem: function(item) { 
         return item.name; 
        } 
       }).result(function(event, item) { 
        $('#UniID').text(item.id); 
       }); 
      }); // end JSON 
     }); // End function 
    </script> 
</body>

還包括UDE此行

<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>

來源

2010-12-14 07:21:56 Tyde

jQuery的自動完成

回答

相關問題