Question

我有一个带有自动完成jquery搜索的输入表单：

HTML：

<form class="pure-form" action="page.php" method="GET">
    <input name ='Jeu' id="search1">
    <input type="submit" value="Go">
</form>

JS：

$( document ).ready(function() {
    $(function() {
        $.widget( "custom.catcomplete", $.ui.autocomplete, {
            _create: function() {
              this._super();
              this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
            },
            _renderMenu: function( ul, items ) {
              var that = this,
                currentCategory = "";
              $.each( items, function( index, item ) {
                var li;
                if ( item.category != currentCategory ) {
                  ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                  currentCategory = item.category;
                }
                li = that._renderItemData( ul, item );
                if ( item.category ) {
                  li.attr( "aria-label", item.category + " : " + item.label );
                }
              });
            }
        });
    });         

    $(function() {
        var data1 = [ { label: "A1", category: "" },
            { label: "B1", category: "" } ];
        $( "#search1" ).catcomplete({
            delay: 0,
            source: data1
        });
    });

现在我有第二个数据集：

    $(function() {
        var data2 = [ { label: "A2", category: "" },
            { label: "B2", category: "" } ];
        $( "#search2" ).catcomplete({
            delay: 0,
            source: data2
        });
    });

目标：将输入ID从“search1”动态更改为“search2”，以便搜索“data2”而不是“data1”。

我设法用jquery改变输入id：

$('input[name=Jeu]').attr("id","search2");

但是 data1仍然用于搜索，而输入ID已更改为“search2”！那是为什么？

Answer 1

如果元素的id被更改，那么它并不意味着将不再触发绑定到该元素的所有事件。

您使用了以下代码

$( "#search1" ).catcomplete({
     delay: 0,
     source: data1
});

它已将data1与您的搜索输入绑定。现在，当您更改ID时，绑定仍然保持不变。

我认为方法是首先更改绑定然后更改id。这可能对你有用。

尝试这样的事情。

function changeDataSet(){
  $( "#search1" ).catcomplete({
     delay: 0,
     source: data2
 });

 $('#search1').attr("id","search2");
}

并通过任何按钮点击或任何其他事件调用此函数。

希望有所帮助。

基于动态输入id的jquery自动完成数据源

1 个答案: