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>

因此，此实时搜索有效，并将结果设置在下拉菜单中。

现在，我要有两个实时搜索输入字段。第二个列出了另一个查询的结果。

我试图给<div>提供一个ID或名称，并设置以下if-else-statement：

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

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

由于样式，第二个也应称为“搜索框”，并且“结果”也应没有其他名称。

有没有办法？预先感谢。

Answer 1

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

现在，在“获取搜索结果”功能中，您可以像这样构建网址

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

此处文件名是输入字段中的数据属性。

您可以将其设置为您输入的html标签中的data-filename='searchschule'。

所有其他都应该正常工作。只需添加另一个html div。另外，请确保添加正确的文件名作为其数据属性。

jQuery Live Search在一个网站上两次

1 个答案: