2014-09-21 53 views
0

我正在嘗試學習網站開發。 在學習jquery的自動完成功能的同時,我試圖加入標籤。Jquery:帶標籤的自動填充

function autocomplete (data) { 
     var data = data.toString(); 
     var availableTags = data.split(','); 
     var autocompleteData = []; 
     for (var i = 0; i < availableTags.length; i++){ 
      autocompleteData[i] = {}; 
      autocompleteData[i].label = i.toString(); 
      autocompleteData[i].value = availableTags[i]; 
     } 
     $("#tags").autocomplete({ 
      source: autocompleteData, 
      select: function (event, ui) { 
       printautocomplete(event, ui) 
      } 
     }); 
    }; 

autocomplete [i] .value是一個有效的字符串。

autocompleteData[0] 
Object {label: 0, value: "Peter"} 

但是,我沒有看到任何建議。 我使用API​​的方式有什麼問題?

的API表示: 「陣列:一種陣列可用於本地數據有兩種支持格式:。

An array of strings: [ "Choice1", "Choice2" ] 
OR An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] 

標籤屬性被顯示在建議菜單的值將被插入到用戶選擇一個項目時的輸入元素,如果只指定了一個屬性,則將用於兩個屬性,例如,如果只提供值屬性,則該值也將用作標籤。「 謝謝。

回答

0

自動完成工作正常。它不是完成「價值」,而是完成「標籤」。 因此,當我輸入「1」時,它建議「1」,「10」,「11」等。

Autocomplete applying value not label to textbox回答如何改變爲按值。

0

我懷疑2號線在你的代碼(var data = String()data;)我會使用:var data = data.toString();

但是,如果你是確保autocompleteData元素確實具有有效的字符串,然後我最好的猜測是,也許你忘了將'#tags' id賦予您的html條目字段元素。

最後,如果這不是它,解決,我會嘗試去除要傳遞到autocomplete()在開始的行對象的select:選項:$("#tags").autocomplete(...這樣只有源選項傳遞。

要檢查的另一件事是代碼運行時。需要使用document.ready()函數來確保在將自動完成功能添加到ID爲'#tags'的DOM元素時,該元素已被創建。

+0

如果我使用「source:availableTags」而不是「source:autocompleteData」,它可以工作得很好。 – 2014-09-21 08:29:11

+0

代碼正在工作,但它基於標籤自動完成,而不是值。 – 2014-09-21 08:37:41

+0

是的,它應該將輸入的文本與'label'匹配,然後在用戶提交輸入時將相應的'value'發送給頁面中接收到的任何內容。你可以通過在你的'autocompleteData'對象中提供一個'value'來避免這種情況(放棄添加i.string標籤的行),或者只發送字符串選項數組(如你注意到的那樣是'availableTags',那麼你可以在初始化它後立即使用此數組來縮短代碼。 – Ralph 2014-09-21 09:16:37