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

Question

我有一个 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 );
        });
    };

我想要的是始终显示 'Create New Contact' 选项。即使键入的文本与我的数组 或 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");});

Answer 1

这里最简单的解决方案是在返回的建议列表中注入默认值，那么无论用户输入什么，它都可以一直显示。这比您尝试操作生成的 HTML 标记要容易得多。

有两种方法可以使用自动完成的 API:

1) 创建自定义数据源。 http://api.jqueryui.com/autocomplete/#option-source - "source" 选项可以是一个函数，您可以在其中做任何您想做的事情，只要您在回调中提供响应列表即可。

2) 处理 "repsonse" 事件。 http://api.jqueryui.com/autocomplete/#event-response - 这使您可以在向用户显示之前访问返回的响应列表（即使没有找到匹配的响应，此事件仍会触发）。此时您可以轻松地将默认项添加到响应数组中。

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

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

Show one default option in Autocomplete Search

jquery

jquery-ui-autocomplete