Jquery 在自动完成搜索中显示一个默认选项

我有一个Jquery自动完成-

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

---

这里最简单的解决方案是将默认值注入到返回的建议列表中，然后无论用户键入什么，都可以始终显示该列表。这比您尝试操作生成的HTML标记要容易得多

使用autocomplete的API有两种方法：

1） 正在创建自定义数据源。-“source”选项可以是一个函数，在这个函数中，只要在回调中提供响应列表，就可以执行任何您喜欢的操作

2） 处理“repsonse”事件。-这使您可以在返回的响应显示给用户之前访问这些响应的列表（即使没有找到匹配的响应，此事件仍将触发）。此时，您可以轻松地将默认项添加到响应数组中

---

就个人而言，对于您想要做的事情，我认为选项2是最简单的。

源选项可以是一个函数。因此，您可以使用它定义一个函数来搜索数据库/数组，但也可以使用默认选项在返回的数据中插入一个额外的项。在我看来，这是最干净的选项。有关如何实现的详细信息，请参阅。我可以通过这种方式来实现，但问题是，在这之前，我有另一个自动完成，它对DB产生影响，并为自己获取所有内容，加上此特定自动完成的所有内容。我不想仅仅为了这一次就再次点击DB。创建此自动完成后，“联系人”数组中的数据已经存在。有没有其他的解决办法来保存数据库点击并实现我想要的？我愿意接受这些想法…你给“源”的函数仍然可以从你的联系人数组中读取，不需要DB调用。（毕竟，这是一个函数，你可以让它做任何你喜欢的事情！）。这只是意味着在向用户显示建议之前，您可以修改其中的内容。另一个可能更简单并达到相同效果的选项是处理“响应”事件-您也可以在那里操作结果：如果将默认值注入返回的建议列表，则无论用户类型如何，它都将始终显示。响应总是返回给用户，即使结果是空的。所以，使用这些方法，您可以截取它并将其更改为包含您的默认值。如果您查看我为您提供链接的“响应”事件的文档，它会说“搜索完成时始终会触发此事件，即使由于没有结果而无法显示菜单”，因此，如果您随后添加结果，它将导致显示菜单。

$('#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 );
        });
    };

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)

$('#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");});