如何使用json數據設置jQuery自動完成控件中的鍵\值？

我該如何使用這個json數據作爲jquery自動完成的數據源？如何使用json數據設置jQuery自動完成控件中的鍵值？

[{"uid":"123","UserName":"xxx"},{"uid":"124","UserName":"yyy"}] 


<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="jquery.ui.core.js" type="text/javascript"></script> 
<script src="jquery.ui.position.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script> 
<script src="jquery.ui.autocomplete.js" type="text/javascript"></script> 

<input name="Txt1" type="text" id="Txt1"> 

<script language="javascript" type="text/javascript"> 
$("#Txt1").autocomplete(
{ 
    source:[{"uid":"123","UserName":"xxx"},{"uid":"124","UserName":"yyy"}] 
} 
) 
</script>

來源

2012-01-26 Raymond Morphy

這個JSON來自ajax調用嗎？ –

是它來自ajax調用 –

我已經找到了自定義返回值的最佳做法是創建解析函數。這使您可以使用返回的JSON執行您想要的操作。在這個示例代碼中，我沒有提到ajax調用，但是如果需要的話，我也可以添加它。 jQuery UI自動完成查找標籤和值實體。您可以根據需要將其中任意一個放入，或者根據需要進行一些自定義操作。

var myStuff = [{ 
    "uid": "123", 
    "UserName": "xxx"}, 
{ 
    "uid": "124", 
    "UserName": "yyy"}]; 

function imAutocompleteJSONParse(data) { 
    var rows = []; 
    var rowData = null; 
    var dataLength = data.length; 
    for (var i = 0; i < dataLength; i++) { 
     rowData = data[i]; 
     rows[i] = { 
      label: rowData.UserName, 
      value: rowData.UserName 
     }; 
    } 
    return rows; 
} 

$("#Txt1").autocomplete({ 
    source: function(request, response) { 
     var rows = imAutocompleteJSONParse(myStuff); 
     return response(rows); 
    }, 
    minLength: 2 
});

爲了清楚起見，我把這個小提琴頁面，所以你可以看到它的工作：http://jsfiddle.net/MarkSchultheiss/TRKeE/

現在，當我懷疑你想要做一些自定義/不同的東西的結果，我有創建瞭如何使用自定義值工作這一習俗例如：http://jsfiddle.net/MarkSchultheiss/TRKeE/2/

不同的是，我改變了解析功能，並增加了一個新的自動完成選項。

var myStuff = [{ 
    "uid": "123", 
    "UserName": "xxx"}, 
{ 
    "uid": "124", 
    "UserName": "yyy"}]; 

function imAutocompleteJSONParse(data) { 
    var rows = []; 
    var rowData = null; 
    var dataLength = data.length; 
    for (var i = 0; i < dataLength; i++) { 
     rowData = data[i]; 
     rows[i] = { 
      uid: rowData.uid, 
      UserName: rowData.UserName, 
      label: rowData.UserName, 
      value: rowData.uid 
     }; 
    } 
    return rows; 
} 

$("#Txt1").autocomplete({ 
    source: function(request, response) { 
     var rows = imAutocompleteJSONParse(myStuff); 
     return response(rows); 
    }, 
    select: function(event, ui) { 
     var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null); 
     if (hasValue) { 
      var focusedElement = $(this); 
      focusedElement.val(ui.item.label); 
      $('#labelResult').text(ui.item.label); 
      $('#valueResult').text(ui.item.label); 
      $('#customResult').text(ui.item.uid + ":" + ui.item.UserName); 

      return false; 
     } 
     else { 
      return false; 
     } 
    }, 
    minLength: 2 
});

來源

2012-01-26 21:04:04

非常感謝。但是當我輸入文本框時，它顯示了所有items.it應該只顯示匹配的項目。 –

是的，這是由於我處理結果數組的方式。根據輸入的文字發送之前，我會過濾結果。如果這不是你想要的，你可以在數組上使用.push（），例如，如果你預先加載了數組。就我而言，我有成千上萬的結果，需要過濾器完成服務器端。 –

感謝您 - 選擇事件和鍵，值位的組合對我來說真的很有用。 –

-1

真的很簡單

$('#Txt1').autocomplete({source: 'URL to your JSON file/script'});

，如果你的代碼是真的很奇怪了。你要添加的JSON作爲一個字符串使用

$('#Txt1').autocomplete({source: $.parseJSON(your_string) });

來源

2012-01-26 20:06:20 roman

怎麼辦如果我想直接給json作爲數據源不是url？ –

如何使用json數據設置jQuery自動完成控件中的鍵\值？

回答

相關問題