Bootstrap选项卡和jQuery自动完成内容长度

I am using bootstrap tabs. Inside each tab there is a form which differs from each other. The user can use any of them to search about what he needs specifically. I used jQuery autocomplete in each form and the user has to choose one of them, otherwise the submit button will not be active to be submitted and at the same time “No results found” message will appear to the user. That has already been happened with the form of the first tab.
But this does not work on the rest of the tabs and when I check the console I found this error message:

Uncaught TypeError: Cannot read property 'length' of null at HTMLInputElement.response.

I want to know what is wrong with my code that I use for the rest of tabs and how can I fix this?

HTML - Bootstrap Tabs

<ul class="nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">Public Search</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu1">Detailed  Search</a>
    </li>
</ul>
<div id="home" class="tab-pane fade in active">
    <form>
        <input type="text" name="ser" id="auto" required />
        <div id="empty-message" class="warning"></div>
        <input type="submit" id="sub" />
    </form>
</div>
<div id="menu1" class="tab-pane fade">
    <form>
        <input type="text" name="ser" id="auto1" required />
        <div id="empty-message1" class="warning"></div>
        <input type="submit" id="sub1" />
    </form>
</div>

JavaScript

$(function() {
$( "#auto" ).autocomplete({
    source: 'scripts/chresults.php',
    response: function(event, ui) {
        if (ui.content.length === 0) 
            {
            $("#empty-message").text("No Results Found");
            $("#sub").attr("disabled","disabled");
            } 
        else 
            {
            $("#empty-message").empty();
            $("#sub").removeAttr("disabled");
            }
     }
   });
 });

 $(function() {
 $( "#auto1" ).autocomplete({
    source: 'scripts/chresults_city.php',
    response: function(event, ui) {
        if (ui.content.length === 0) 
            {
            $("#empty-message1").text("No Results Found");
            $("#sub1").attr("disabled","disabled");
            } 
        else 
            {
            $("#empty-message1").empty();
            $("#sub1").removeAttr("disabled");
            }
        }
     });
    });
douche1936
douche1936 你能告诉我们console.log(ui);谢谢
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐