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 );
        });
    };

我想要的是始终显示“创建新联系人”选项。即使键入的文本与我的数组或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 - ＆＃34;来源＆＃34;选项可以是一个函数，只要您在回调中提供回复列表，就可以在其中执行任何操作。

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

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

在自动填充搜索中显示一个默认选项

1 个答案: