jQuery 移动自动完成不会自我更新

Posted 2023-05-09

【中文标题】jQuery 移动自动完成不会自我更新

【英文标题】：jQuery mobile autocomplete is not updating itself

【发布时间】：2015-06-26 12:26:33

【问题描述】：

我是 jQuery 和 jQuery mobile 的新手。

我正在尝试使自动完成字段正常工作。到目前为止，我所拥有的几乎都是从 http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/ 的演示中摘录的

$( document ).on( "pagecreate", "#foo", 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: "/cgi/perl_script.pl",
            data: \'search=\' + value,
            dataType: "json",
            traditional: true
        )
        .then( function ( response ) 
            $.each( response, function ( i, val ) 
                alert(JSON.stringify(val));
                html += "<li>Just a test</li>";
            );
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        );
    
);
);

我已确认 js 警报返回了 json 数据。这一切都完美无缺。如果我的 perl 脚本返回 3 条 json 记录，我会收到三个带有字符串化 JSON 的警报。

但是，即使我在尝试调试问题时使用代码中显示的简单“只是一个测试”字符串，小部件也不会显示记录。

这里是相关的html代码：

  <div role="main" class="ui-content">
    <form class="ui-filterable">
      <input id="autocomplete-input" data-type="search" placeholder="Last name">
    </form>
  <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>

【问题讨论】：

好的，如果我在$ul.html( html );这行之后弹出一个警告对话框，我可以看到选项弹出。当我关闭警报对话框时，选项也会消失。

我快接近了。我将实际值放入 元素中，它开始工作。不知道为什么。但是，我无法选择任何选项。我只是单击，没有任何反应。

好的，我知道我必须为小部件添加一个事件处理程序以检测它何时被更改。

【参考方案1】：

答案见原帖的cmets。

【讨论】：

不要引用，请在此处添加内容。