Jquery远程完成，li's不可选择

Jquery remote completion, li's are not selectable

本文关键字：可选择 程完成 li Jquery      更新时间：2023-09-26

我正试图使用远程主机创建一个带有文本完成的文本输入。

我一直在尝试在以下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对象，无序列表就会正确填充。

我遇到的问题是，一旦我看到文本完成（li元素），我就无法选择任何元素。

我试着在我的Galaxy Note 2上浏览这个例子，但我遇到了同样的问题，元素是不可选择的。

有什么办法解决这个问题吗？感谢

更新

关于@Omar的评论，我改了下面一行：

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

至

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

现在我可以点击一个项目，但它没有任何作用。它应该关闭列表并将所选项目添加到文本字段中。

您需要将事件委托给生成的列表项，然后用该值更新输入。

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

演示

相关文章：