1

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

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

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

但是，我还需要它在用户按 Enter 键（或在手机上单击“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 mobile listview 自动完成......

任何帮助将不胜感激 - 谢谢！

4

1 回答 1

4

嘿，我使用了本地自动完成 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 演示

/更新

关于 go 按钮 - 因为autocomplete小部件围绕您的内容包装了一个表单元素，所以 go 按钮将submit在form. 这意味着您可以使用下面这个简单的事件处理程序来收听 Enter 键按下和 Go 按钮按下 -

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

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

于 2013-08-23T14:52:27.640 回答