jQuery在一个网站上进行了两次实时搜索

Question

我有以下JQuery Live Search，它运行良好。这是JQuery部分：

<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("livesearch/searchschule.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result option", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>

这是html部分：

<div class='search-box' style='width: 95%;'>
<input type='text' name='Schule' autocomplete='off' placeholder='Schule suchen'>
<div class='result'></div>
</div>

因此，这个实时搜索可以工作，并在下拉列表中设置结果。

现在我想要两个Live Search输入字段。第二个，列出另一个查询的结果。

我尝试给<div>一个id或名称，并设置以下if-else语句：

if ($('.search-box').attr('id') == '0'){ ... }

但这并没有起作用，因为我添加了第二个输入字段。第二个sql查询存储在自己的php文件中。

第二个也应该被称为"搜索框"，而且由于样式的原因，"结果"没有其他名称。

那么有办法吗？提前谢谢。

Answer 1

您可以在输入字段上添加一个数据属性，该属性将存储查询文件的名称。

现在，在你的获取搜索结果功能中，你可以构建这样的 url

var searchUrl = 'livesearch/' + $(this).data('filename') + '.php';

这里的filename是输入字段中的数据属性。

你可以设置为输入html标记中的data-filename='searchschule'。

休息一下，一切都会好起来的。只需添加另一个htmldiv。还要确保添加了正确的文件名作为其数据属性。