顯示在自動完成搜索

一個默認選項我有一個jQuery自動完成 -顯示在自動完成搜索

<input type="text" id="contactName" class="form-control input-lg formData textVal" placeholder="Contact Name&#42;"/>

與jQuery代碼如下 -

$('#contactName').autocomplete({ 
     source: contacts, 
     minLength: 0, 
     autoFocus: true, 
     open: function(event) {}, 
     close: function() {}, 
     focus: function(event,ui) { 

     }, 
     select: function(event, ui) { 
      if(ui.item.id == 'create-new-contact'){ 
       //do something to create a new contact 
      }else{ 
       $('#contactIDVal').val(ui.item.id); 
      } 
     } 
    }).on('focus', function(){$(this).autocomplete("search");}); 
    $("#contactName").autocomplete('instance')._renderMenu = function(ul, items) { 
     var self = this; 
     ul.prepend('<li value="create-new-contact">Create New Contact</li>'); 
     $.each(items, function(index, item) { 
      self._renderItemData(ul, item); 
     }); 
    };

我想是要表明總是「新建聯繫人」選項。即使鍵入的文本與我的數組或NOT中的元素匹配。我能夠實現第一部分，但是當鍵入的文本與不匹配時，數組中的任何項都不會調用_renderMenu。無論輸入的文本是否與源數組中的任何內容匹配，如何顯示一個默認選項。

除此之外，我創建默認項目在這裏 -

ul.prepend('<li value="create-new-contact">Create New Contact</li>');

是給我下面的錯誤，當我把我的鼠標移到該項目 -

Uncaught TypeError: Cannot read property 'value' of undefined 
    at $.(anonymous function).(anonymous function).menufocus (http://code.jquery.com/ui/1.11.4/jquery-ui.js:3012:49) 
    at HTMLUListElement.handlerProxy (http://code.jquery.com/ui/1.11.4/jquery-ui.js:726:7) 
    at HTMLUListElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8549) 
    at HTMLUListElement.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5252) 
    at Object.trigger (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:7650) 
    at HTMLUListElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15517) 
    at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2975) 
    at m.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:835) 
    at m.fn.init.trigger (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15493) 
    at $.(anonymous function).(anonymous function)._trigger (http://code.jquery.com/ui/1.11.4/jquery-ui.js:813:16)

任何想法如何我可以實現這個沒有所有這些垃圾？感謝

編輯 - 我@ADyson的幫助

$('#contactName').autocomplete({ 
     source: contacts, 
     response: function(event, ui){ 
      ui.content.push({id:'create-new-contact', label:'Create New Contact', value:'Create New Contact'}); 
     }, 
     minLength: 0, 
     autoFocus: true, 
     open: function(event) {}, 
     close: function() {}, 
     focus: function(event,ui) { 

     }, 
     select: function(event, ui) { 
      if(ui.item.id == 'create-new-contact'){ 
       //do some stuff here 
      }else{ 
       $('#contactIDVal').val(ui.item.id); 
      } 
     } 
    }).on('focus', function(){$(this).autocomplete("search");});

來源

2016-11-11 Nalin Agrawal

「源」選項可以是一個函數。所以你可以使用它來定義一個函數來搜索你的數據庫/數組，但是也可以用默認選項在返回的數據中插入一個額外的項目。這是IMO最乾淨的選項。有關如何實現的詳細信息，請參閱http://api.jqueryui.com/autocomplete/#option-source – ADyson

我可以這樣做，但事實是，在此之前我有另一個自動完成功能，這使得數據庫命中併爲自身獲取所有內容，併爲此特定自動完成添加所有內容。我不想爲了這個而再次擊中數據庫。創建此自動完成功能後，我已經在'contacts'數組中創建了數據。任何其他解決方法來保存數據庫匹配和實現我想要的？我對想法持開放態度...... –

您給「來源」的功能仍然可以從您的聯繫人數組中讀取，因此不需要進行數據庫調用。（畢竟，這是一個功能，你可以讓它做任何你喜歡的事！）。這意味着您可以在向用戶顯示建議之前修改其內容。 – ADyson

這裏最簡單的辦法是注入默認值進入的建議返回列表中，那麼它隨時可以顯示出來，不管解決它用戶輸入的內容。這比試圖操作生成的HTML標記要容易得多，這正是您嘗試的。

這樣做有使用自動完成的API的方法有兩種：創建一個自定義數據源

1）。 http://api.jqueryui.com/autocomplete/#option-source - 「source」選項可以是一個函數，只要您在回調中提供回覆列表，就可以在其中執行任何操作。

2）處理「repsonse」事件。 http://api.jqueryui.com/autocomplete/#event-response - 這可讓您在向用戶顯示返回的響應列表（即使未找到匹配的響應，此事件仍將觸發）之前訪問返回的響應列表。此時，您可以輕鬆地將您的默認項目添加到響應數組中。

個人的那些，你想做什麼，我認爲選項2是最簡單的。

來源

2016-11-15 09:17:57 ADyson

是的。我嘗試了選項2.它是在一行中解決的。 +1 –

顯示在自動完成搜索

回答

相關問題