Javascript 带有两个输入框的自动建议

我的问题与这个问题完全相同：

然而，在尝试这些建议时，我仍然有同样的问题。
我有两个输入框，我想从数据库中自动建议。
但是，无论键入哪个字段，自动建议仅显示在其中一个框的下方。
这就是我在顶部链接的问题中的建议之后得出的结论

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#customer').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);
}
</script>

<script>
function suggest(inputString){
if(inputString.length == 0) {
    $('#suggestionssearch').fadeOut();
} else {
$('#customersearch').addClass('load');
    $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
        if(data.length >0) {
            $('#suggestionssearch').fadeIn();
            $('#suggestionsListsearch').html(data);
            $('#customersearch').removeClass('load');
        }
    });
    }
}

function fill(thisValue) {      
$('#customersearch').val(thisValue);
setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

函数建议（inputString）{
如果（inputString.length==0）{
$（“#建议”）.fadeOut（）；
}否则{
$（'客户'）.addClass（'加载'）；
$.post（“/templates/autosuggest/autosuggest.php”，{queryString:“+inputString+”}，函数（数据）{
如果（data.length>0）{
$（“#建议”）.fadeIn（）；
$（'#SuggestionList'）.html（数据）；
$（“#客户”）.removeClass（'load'）；
}
});
}
}
函数填充（thisValue）{
$（“#客户”）.val（此值）；
setTimeout（“$”（“#建议”）.fadeOut（）；”，10）；
}
函数建议（inputString）{
如果（inputString.length==0）{
$（“#建议搜索”）.fadeOut（）；
}否则{
$（'#customersearch'）.addClass（'load'）；
$.post（“/templates/autosuggest/autosuggest.php”，{queryString:“+inputString+”}，函数（数据）{
如果（data.length>0）{
$（“#建议搜索”）.fadeIn（）；
$（'#SuggestionListSearch'）.html（数据）；
$（'#customersearch'）。removeClass（'load'）；
}
});
}
}
函数填充（thisValue）{
$（'#customersearch'）.val（此值）；
setTimeout（“$”（“#suggestionsearch”）.fadeOut（）；”，10）；
}

以及我的意见：

<input type="text" name="Customer" value="" id="customer" onkeyup="suggest(this.value);" onblur="fill();" class="" style="height:14px; margin-top:2px;" placeholder="Search Customers" autocomplete="off">
<input type="submit">
<div id="suggestcontainer" style="margin-left:2px;">
  <div class="suggestionsBox" id="suggestions" style="display: none;"> 
    <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
  </div>
</div>


<input type="text" name="Customer" value="" id="customersearch" onkeyup="suggest(this.value);" onblur="fill();" class="" style="width:90px; height:14px; margin-top:2px;" placeholder="Customer" autocomplete="off" required="required"/>
<input type="submit" style="float:right;">
<div id="suggestcontainersearch">
  <div class="suggestionsBoxsearch" id="suggestionssearch" style="display: none;"> 
    <div class="suggestionListsearch" id="suggestionsListsearch"> &nbsp; </div>
  </div>
</div>

我已经用我的脚本尝试了这个测试：

<script>
 function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
                    $('#suggestionssearch').fadeOut();
    } else {
    $('#customer').addClass('load');
            $('#customersearch').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
                $('#suggestionssearch').fadeIn();
                $('#suggestionsListsearch').html(data);
                $('#customersearch').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);


    $('#customersearch').val(thisValue);
    setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

函数建议（inputString）{
如果（inputString.length==0）{
$（“#建议”）.fadeOut（）；
$（“#建议搜索”）.fadeOut（）；
}否则{
$（'客户'）.addClass（'加载'）；
$（'#customersearch'）.addClass（'load'）；
$.post（“/templates/autosuggest/autosuggest.php”，{queryString:“+inputString+”}，函数（数据）{
如果（data.length>0）{
$（“#建议”）.fadeIn（）；
$（'#SuggestionList'）.html（数据）；
$（“#客户”）.removeClass（'load'）；
$（“#建议搜索”）.fadeIn（）；
$（'#SuggestionListSearch'）.html（数据）；
$（'#customersearch'）。removeClass（'load'）；
}
});
}
}
函数填充（thisValue）{
$（“#客户”）.val（此值）；
setTimeout（“$”（“#建议”）.fadeOut（）；”，10）；
$（'#customersearch'）.val（此值）；
setTimeout（“$”（“#suggestionsearch”）.fadeOut（）；”，10）；
}

这在某种意义上是有效的，如果我输入一个，那么两个都会出现，显然不是我需要的，而是显示它看到了它们。似乎它不喜欢有两个脚本

任何帮助都会很棒。 提前为大家欢呼

还有，如果有人知道我如何通过键盘上下按钮滚动自动建议的结果，那将是锦上添花

我建议使用具有自动完成小部件的

$( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

回复评论

要自定义自动完成建议的出现顺序，可以将SQL查询更改为使用。下面的查询将返回以

$search

开头的所有结果，然后返回在某个点仅包含该结果的其他结果

SELECT Customer 
FROM Customers 
WHERE Customer LIKE '%$search%' 
ORDER BY CASE 
    WHEN Customer LIKE '$search%' THEN 1 
    ELSE 2 
END

---

你为什么要在这里重新发明轮子？有一个自动完成的小部件，它支持远程数据源。好的，为此干杯。“@atomman我现在需要知道的是如何对建议结果的顺序进行排序，以便在键入字母“M”时，所有以“M”开头的结果都会首先显示。”。目前，它可以在单词的任何地方找到所有字母“M”的单词，但从第一个字母开始按字母顺序排列。如果这有什么意义的话。。。已尝试在数据库中按选择进行订购，但无效。我正在使用代码。脚本：

$（function（）{$（“#customersearch”）.autocomplete（{source:/templates/autosuggest/customersuggest.php），select:function（event，ui）{var selectedObj=ui.item；}}}）和数据库选择：
$search=$\u GET['term']$字母=substr（$search，0，1）$req=“从客户（如“%$search%”按客户（如“%$letter%”）排序）中选择客户”
从客户中选择客户，其中客户（如“%$search%”）按案例订购，而客户（如“%$search%”）则1其他2结束
类似的可能，但未测试。