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用戶界面自動完成 - 構建自定義源

回答

相關問題