Question

我正在关注jquery移动远程自动完成演示：

http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-autocomplete.html

我的数据源正在动态填充我的列表，当用户点击列表中的结果时，我可以做一些事情。

但是我还需要它在用户点击进入时触发功能（或点击手机上的“Go”）...我该怎么做？这是我目前的代码：

$( document ).on( "pageinit", "#myPage", function() {
        $( "#autocomplete" ).on( "click","li",function() {
            // do stuff when user clicks on item in list
            alert('Doing stuff!');                
        });
        $( "#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: "http://mywebservice/"+$input.val(),
                    dataType: "json",
                    crossDomain: false
                })
                .then( function ( response ) {
                    $.each( response, function ( i, val ) {
                        html += "<li><a href='#'>" + val.display_name + "</a></li>";
                    });
                    $ul.html( html );
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                });
            }
        });
});

我一直在寻找很多帮助，但大多数结果都是关于jquery自动完成而不是jquery移动列表视图自动完成......

任何帮助都会非常感激 - 谢谢！

Answer 1

嘿我使用了一个本地自动完成jQM小部件，但这对你来说也是一样的 -

HTML -

<div data-role="page" id="carPage">
    <div data-role="content">
        <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a car..." data-filter-theme="d">
            <li><a href="acura.html">Acura</a></li>
            <li><a href="audi.html">Audi</a></li>
            <li><a href="bmw.html">BMW</a></li>
            <li><a href="bmw.html">Cadillac</a></li>
            <li><a href="bmw.html">Ferrari</a></li>
            <li><a href="bmw.html">Honda</a></li>
        </ul>
    </div>
 </div>

JS -

$(function () {
    $('#carPage input[data-type="search"]').on('keydown', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
         if (code == 13) { //Enter keycode
             alert('enter key was pressed');
         }
    });
});

jsFiddle Demo

/更新

关于go按钮 - 由于autocomplete小部件在您的内容周围包含表单元素，因此go按钮将在submit上触发form。这意味着您可以使用这个简单的事件处理程序按下回车键和按下按钮，如下所示 -

$("#carPage form").submit(function() {
    // this will handle both the enter key and go button on device
});

我用上述两种方法更新了jsFiddle演示。我最喜欢第二种方法，因为它最容易处理两种情况。

Jquery Mobile Listview自动完成：当用户按下Enter键时如何触发功能？

1 个答案: