我想創建一個文本輸入與文本完成使用遠程主機。jquery遠程完成，李的不可選

我一直在嘗試使用下面的URL的例子：http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/

這是這個例子的JavaScript代碼：

$(document).on("pageinit", "#myPage", function() { 
$("#autocomplete").on("filterablebeforefilter", 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://gd.geobytes.com/AutoCompleteCity", 
      dataType: "jsonp", 
      crossDomain: true, 
      data: { 
       q: $input.val() 
      } 
     }) 
     .then(function (response) { 
      $.each(response, function (i, val) { 
       html += "<li>" + val + "</li>"; 
      }); 
      $ul.html(html); 
      $ul.listview("refresh"); 
      $ul.trigger("updatelayout"); 
     }); 
    } 
}); 
});

所以首先我改變的dataType從JSONP到JSON這使得ajax調用返回一個合適的json對象，並且無序列表被正確填充。

我遇到的問題是，一旦我看到文本完成（李元素），我不能選擇任何元素。

我試着在我的Galaxy Note 2上瀏覽這個例子，並且遇到了同樣的問題，元素不可選。

任何想法如何解決該問題？感謝

更新

爲@Omar評論我改變了下面一行：

html += "<li>" + val + "</li>";

到

html += "<li><a href='#'>" + val + "</a></li>";

現在我可以點擊一個項目，但它不會做任何東西。它應該關閉列表並將所選項目添加到文本字段。

來源

2014-11-06 ufk

你這是什麼意思選擇？點擊？ – Omar 2014-11-06 09:19:40

yeap :)我應該可以點擊其中一個元素，而且它們都不可點擊。 – ufk 2014-11-06 09:39:50

因爲您使用的是隻讀列表視圖。對於可點擊列表項，「a」錨應放置在「li」內，例如'

" + Val + "

'。 – Omar 2014-11-06 09:44:27

您需要將事件委派給生成的列表項，然後使用該值更新輸入。

$("#autocomplete").on("click", "li", function() { 
    /* text of clicked element */ 
    var value = $(this).text(); 

    /* update value of input */ 
    $("#autocomplete-input").val(value); 

    /* optional - remove autocomplete result(s) */ 
    $(this).parent().empty(); 
});

Demo

來源

2014-11-06 10:25:22 Omar

非常感謝你！ – ufk 2014-11-06 10:37:24

@ufk不客氣:) – Omar 2014-11-06 10:52:28

jquery遠程完成，李的不可選

更新

回答

相關問題