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

时间:2016-12-23 20:14:38

标签: javascript php jquery ajax

我有两个输入文件。我需要两个提交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>

1 个答案:

答案 0 :(得分:1)

我认为当您点击搜索结果时,两个li都会点击事件调用。您应该使用单独的选择器,因此您的点击事件应该看起来像

  class TimesController < ApplicationController
  def index
    @search_term = '51048'
    @courses = Checker.for(@search_term)
  end
end