Question

我正在使用这段代码与JqueryMobile创建一个自动完成的组合。它工作正常，但现在我想在用户键入少于3个字符的内容时添加消息“输入至少三个字符”。

我尝试使用此代码：

$( document ).on( "pageinit", function() {
        $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                url : "myjson/api/",
                dataType : "json",
                crossDomain : true,
                encoding : "utf-8",
                data : {
                    q : $input.val()
                }
            })
            .then( function ( response ) {
            $.each( response, function ( i, val ) {
            html += "<li>" + val + "</li>";
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
            });
        }
        else if (value && value.length > 0) {
            html = '<li><a>Type at least three characters</a></li>';
            $ul.html(html);
            $ul.listview("refresh");
            $ul.trigger("updatelayout");
            }
        });
     });

只是将else if部分添加到演示页面上已经完成的部分。当我输入单个字符时，我会收到“输入至少三个字符”的消息，但如果我输入2，则消息消失！我查看了Firebug的js debug并执行了else if分支，将html添加到UL列表中，但是一旦ul.trigger("updatelayout")被调用，它就会消失。奇怪的是，评论该行并不能解决问题：在这种情况下，它会在刷新调用后消失。

更奇怪的是，它仅适用于1个字符。

编辑：此外，开箱即用，甚至在演示展示中，在发出AJAX请求时应该显示的刷新层永远不会显示

Answer 1

如果有人感兴趣，问题是listview根据用户键入的内容过滤其元素，因此如果您键入两个字符且那些不在信息消息中（“键入至少3个字符”），那么列表元素将被隐藏。

我用一种笨拙的解决方法解决了这个问题，包括将输入的值作为隐藏的跨度附加到信息消息中：

html = '<li><span style="display:none">' + value + '</span>Type at least 3 characters.</li>';
                        $ul.html(html);
                        $ul.listview("refresh");
                        $ul.trigger("updatelayout");

这种方式有效。

有人应该修复原始演示。

JqueryMobile远程自动完成

1 个答案: