javascript - 自动完成建议框视图修复 Jquery Mobile

Question

我使用 JQuery Mobile 为文本字段创建了自动完成功能。它正在工作并显示自动完成建议。但是自动完成列表的视图并不是正常的自动完成列表的样子。这是我的情况：

这是 JQuery 函数：

$(function() {
    $('#project').autocomplete({
        source: "./SearchCustomer.php?term="+document.getElementById("project").value,
        minLength: 0,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function (event, ui) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            return false;
        }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" ).append( "<a>" + item.label + "</a>" ).appendTo( ul );
    };
 });

这是HTML：

<label for="name">Customer:</label>
<input type="text" name="project" id="project" value=""  />
<input type="hidden" id="project-id" />
<p id="project-description"></p>

请帮助解决这个问题。

Answer 1

当您以编程方式创建新元素时，您需要触发 create 事件以让 jquerymobile 增强它们。

所以它应该是这样的

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" ).append( "<a>" + item.label + "</a>" )
                      .appendTo( ul )
                      .trigger( "create" );
};

请参阅JQM FAQ 中有关注入内容的这个问题。