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＆lt; 2”更改为“term.length＆lt; = 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

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

1 个答案: