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

Question

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