jquery-ui - 如何更改 JSON 值的 jQuery UI 选择器？

Question

我有这种类型的 json 文件

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

我需要通过 jquery 自动完成来选择 last_name。UI 自动完成中的默认值不是“标签”，而是 last_name。

Answer 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 的一部分并且可能会发生变化。

Answer 2

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

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