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

Question

I'm following the jquery mobile remote autocomplete demo:

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

My list is being dynamically populated from my datasource fine and I can do things when the user clicks on a result from the list.

However I also need it to trigger a function when the user hits enter (or clicks “Go” on the phone)... How can I do this? Here's my current code:

$( 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");
                });
            }
        });
});

I've been searching alot for help, but most results have been talking about the jquery autocomplete and not the jquery mobile listview autocomplete...

Any help would be much appreciated -thanks!

Answer 1

Hey I used a local autocomplete jQM widget but this will work the same for ya -

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

/Update

Regarding the go button - Because the autocomplete widget wraps a form element around your content the go button will trigger a submit on the form . This means you can listen to the enter key press and go button press with this simple event handler like this below -

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

I updated the jsFiddle demo with both approaches above. I like the second approach best because it handles both scenarios the easiest.