如何使用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自动完成控件中的键\值？

回答

相关问题