jQuery用户界面自动完成 - 构建自定义源

我有形式的JSON数组：jQuery用户界面自动完成 - 构建自定义源

[{"label":<some-label>,"spellings":[<list of spellings>]}, ...]

我需要使用jquery UI自动填充来解析上述阵列。但是，有几个约束：

自动填充建议应该包含来自“拼写”的匹配，但应仅建议相应的“标签”。例如如果“标签”有n个“拼写”，那么自动完成应该只显示n个“拼写”的特定“标签”。
从提供的建议中进行选择时，相应的“标签”只应反映在文本输入框中。

我该如何处理？任何指针？

而且，如何迭代“拼写”列表中的相应“标签”？

这是我想要做的，但给出了乱码。

var labels = [] 
var values = [] 
$.getJSON($url, function(data) { 
    $.each(data, function(key, val) { 
    for (var v in val.value) 
     values.push(val.value[v]) 
    labels.push(val.label) 
}); 
$("#text1").autocomplete({ 
    minLength: 2, 
    source: values, 
    focus: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
    }, 
    select: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
    } 
}); 
});

来源

2012-08-08 Ankit Garg

任何机构都有帮助吗？ – 2012-08-08 11:59:27

我建立项目的单一源阵列，一个用于每个拼写，其中label属性是每个拼写的标签和value属性是拼写本身。这将使您能够快速过滤结果，而无需遍历每个对象的spelling数组并检查可能需要一段时间的匹配。

然后，在为source定义的函数中，您可以执行自己的过滤逻辑，只允许建议列表中的每个“标签”的一个实例。

像这样的东西应该工作（注意，自动完成是$.getJSON回调的内部初始化这是必要的，以确保源数据加载控件初始化之前）：

$.getJSON($url, function(data) { 
    $.each(data, function (i, el) { 
     source.push({ label: el.label, value: el.label }); 

     $.each(el.spellings, function (j, spelling) { 
      source.push({ label: el.label, value: spelling }); 
     }); 
    }); 

    /* initialize the autocomplete widget: */ 
    $("input").autocomplete({ 
     source: function (request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i") 
       , results = []; 

      /* Make sure each entry is only in the suggestions list once: */ 
      $.each(source, function (i, value) { 
       if (matcher.test(value.value) && $.inArray(value.label, results) < 0) { 
        results.push(value.label); 
       } 
      }); 
      response(results); 
     } 
    }); 
});

例子：http://jsfiddle.net/MaMZt/

来源

2012-08-08 16:26:21

jQuery用户界面自动完成 - 构建自定义源

回答

相关问题