分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 如何触发多远程jquery自动完成UI的自动搜索选项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

请注意,自动建议的数据来自网络服务.如果用户在文本框中键入内容,则建议会相应更改.即键入的数据进入服务并带回建议.
输入是“名称,位置”表单.结果,输入的不同部分显示不同类型的建议.

用户界面：

<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”.这有效,但我必须按空格键.然后在文本框中放置一个空白区域,并将请求发送到服务器.但我不想在那里打字.
希望有所帮助.

解决方法

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

所以在代码中：

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