jsonデータでjQueryオートコンプリートコントロール内のキー\値を設定するにはどうすればよいですか？

Question

この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> 

Answer 1

私が発見しましたカスタム戻り値のベストプラクティスは、解析関数を作成することです。これにより、返された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 
}); 

あなたが働いてそれを見ることができますので、私はフィドルページでこれを置く：NOW 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 
}); 

Answer 2

本当にシンプル

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

、あなたのコードは本当に奇妙であり、あなたが使用して文字列としてJSONを追加したい場合は

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