如何更改JSON值的jQuery UI选择器?

时间:2013-09-04 20:13:12

标签: jquery-ui autocomplete

我有这种类型的json文件

    {   
        "id":3,
        "name": "John",
        "group_id": 7,
        "last_name":"Mickel"
    }

我需要通过jquery autocomplete选择last_name。 不像“自动标签”那样在UI自动完成中是默认的,但是last_name。

2 个答案:

答案 0 :(得分:1)

试试这个。这不好,但有效。

$("#auto").autocomplete({
   source: function(request, response) {
      var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

      var results = $.grep( myArray, function(value) {
                    return matcher.test( value.last_name );
            });

      response(results)
   }
})
.data("uiAutocomplete")._renderItem = function( ul, item ) {
    console.log("test");
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.last_name+"</a>" )
        .appendTo( ul );
};

source函数使得过滤有效。 _renderItem函数使您的自定义名称实际显示在列表中。

工作小提琴:http://jsfiddle.net/eyjEg/

请注意,我相信jQuery的某些早期版本实际上是.data("autocomplete")

说完这一切之后,我还建议您重新考虑更改或转换JSON数据模型以匹配组件所期望的内容。这将使得更简单并确保您不会被锁定到jQuery版本,因为_renderItem函数是内部API的一部分并且可能会发生变化。

答案 1 :(得分:0)

使用自定义选择器填写数据。

$("element").autocomplete({
  source: json,
  select: function(event, ui) {
    $("element").val(ui.item.last_name);
  });