Jquery Mobile Listview Autocomplete: как вызвать функцию при нажатии пользователем?

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 мобильного ... автозаполнения списке следует

Любая помощь будет много оценил -thanks!

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

/Update

Что касается кнопки go - поскольку виджет autocomplete обертывает элемент формы вокруг вашего контента, кнопка go запускает submit на form. Это означает, что вы можете слушать клавишу ввода нажмите и перейдите нажатия кнопки с помощью этого простого обработчика событий, как это ниже -

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

Я обновил демо jsFiddle с обоих описанных выше подходов. Мне нравится второй подход лучше всего, потому что он обрабатывает оба сценария самым простым.