javascript - Jquery Mobile Listview 自动完成 : how to trigger function when user presses enter?

Question

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

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

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

但是，我还需要它在用户按下回车键(或在手机上单击“开始”)时触发一个功能……我该怎么做？这是我当前的代码:

$( 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 移动 ListView 自动完成...

非常感谢任何帮助 - 谢谢!

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 按钮将触发 form 上的 submit .这意味着您可以使用如下所示的简单事件处理程序收听回车键按下和转到按钮按下 -

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

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