如何触发多远程jquery自动完成UI的自动搜索选项

Question

我正在使用这个自动完成库： http://jqueryui.com/demos/autocomplete/#multiple -remote

我想知道是否有人知道如何触发自动搜索而无需在文本框中输入任何内容。即如果我们想在按钮单击事件上显示列表。 “搜索”方法似乎就是这样做的。但我无法让它工作。

请注意，自动建议的数据来自网络服务。如果用户在文本框中键入内容，建议会相应更改。即键入的数据进入服务并带回建议。 输入的形式为“名称、位置”。因此，对于输入的不同部分，会显示不同类型的建议。

代码：

UI：

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" size="50" />
</div>

脚本：

<script>
    $(function() {
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#birds" )               
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function( request, response ) {
                    $.getJSON( "search.php", {
                        term: extractLast( request.term )
                    }, response );
                },
                search: function() {
                    var term = extractLast( this.value );
                    if ( term.length < 2 ) {
                        return false;
                    }
                },
                focus: function() {
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    terms.pop();
                    terms.push( ui.item.value );
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });
    });
    </script>

如果我输入任何内容，它就会向 search.php 发送请求。 我尝试将逻辑“term.length < 2”更改为“term.length <= 0”。这可行，但我必须按空格键。然后在文本框中放置一个空白区域，并将请求发送到服务器。但我不想在那里输入任何内容。 希望有帮助。

Answer 1

如果您想在单击按钮时触发搜索，则必须调用搜索方法。如果您想显示所有选项，请调用搜索并将值设置为空字符串，并将自动完成小部件设置为接受 minLength: 0。

因此，在代码中：

UI

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" size="50" />
    <input type="button" id="search-trigger" value="Trigger" />
</div>

脚本

<script type="text/javascript">
$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    // Button listener that triggs the search event
    $("#search-trigger").click(function(){
        var searchTerm = $( "#birds" ).val();
        $( "#birds" ).autocomplete( "search" , searchTerm);
    });


    $( "#birds" )               
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: ["lorem", "ipsum", "dolor"], 
                /* Commented this out to use dummy data above
                            function( request, response ) {
                $.getJSON( "search.php", {
                    term: extractLast( request.term )
                }, response );
            },*/
            search: function() {
                var term = extractLast( this.value );

                          /* What is this check for?
                if ( term.length < 2 ) {
                    return false;
                }*/
            },
            focus: function() {
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                terms.pop();
                terms.push( ui.item.value );
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            },
            //Added for "show all" support
            minLength: 0
        });
});
</script>

这是您正在寻找的行为吗？

参考：http://jqueryui.com/demos/autocomplete/#method-search