显示在自动完成搜索

问题描述：

一个默认选项我有一个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");});

“源”选项可以是一个函数。所以你可以使用它来定义一个函数来搜索你的数据库/数组，但是也可以用默认选项在返回的数据中插入一个额外的项目。这是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是最简单的。

是的。我尝试了选项2.它是在一行中解决的。 +1 –

显示在自动完成搜索

相关推荐