javascript - 单击值时，一页中的多个 ajax 搜索在两个输入字段上获得相同的值

Question

我有两个输入字段。我需要两个提交的 ajax 搜索结果。搜索结果工作正常。但问题是，当我单击一个搜索结果中的任何一个时，两个输入字段会获得相同的值。我该如何解决这个问题。

*/HTML */

                 <tr>
                    <td>Bus No</td>
                    <td>
                        <input type="text" name="bus_no" id="bus_no" >
                        <div class="bus_no_search"></div>
                    </td>
                </tr>
                <tr>
                    <td>Source</td>
                    <td>
                        <input type="text" name="source" id="source">
                        <div class="source_search"></div>
                    </td>
                </tr>

*/JavaScript */

        // ajax search bus no

        $('document').ready(function () {
            $('#bus_no').keyup(function () {
                var bus_no = $(this).val();
                if(bus_no != ''){
                    $.ajax({
                        url: "ajax_search.php",
                        method: "POST",
                        data: {bus_no:bus_no},
                        success: function (data){
                            $('.bus_no_search').fadeIn();
                            $('.bus_no_search').html(data);
                        }
                    });
                }else{
                    $('.bus_no_search').fadeOut();
                }
            });
        });

        $(document).on('click' , 'li' , function(){
            $('#bus_no').val($(this).text());
            $('.bus_no_search').fadeOut();
        });




        // ajax search source

        $('document').ready(function () {
            $('#source').keyup(function () {
                var source = $(this).val();
                if(source != ''){
                    $.ajax({
                        url: "ajax_source_search.php",
                        method: "POST",
                        data: {source:source},
                        success: function (data){
                            $('.source_search').fadeIn();
                            $('.source_search').html(data);
                        }
                    });
                }else{
                    $('.source_search').fadeOut();
                }
            });
        });
        $(document).on('click' , 'li' , function(){
            $('#source').val($(this).text());
            $('.source_search').fadeOut();
        });

    </script>

Answer 1

我认为当您单击搜索结果时，都会调用单击事件。您应该对它们使用单​​独的选择器，因此您的点击事件应该类似于

//search bus no
        $(document).on('click' , '.bus_no_search li' , function(){
            $('#bus_no').val($(this).text());
            $('.bus_no_search').fadeOut();
        }); 

//search source
        $(document).on('click' , '.source_search li' , function(){
            $('#source').val($(this).text());
            $('.source_search').fadeOut();
        });