具有多个输入的 Ajax 实时搜索

Posted

技术标签:

【中文标题】具有多个输入的 Ajax 实时搜索【英文标题】:Ajax Live Search with Multiple Inputs 【发布时间】:2018-01-30 21:04:51 【问题描述】:

我正在我的软件中编写一个 ajax 实时搜索功能。有多个输入需要在每个表单上进行 ajax 搜索。一切都很好,除了我希望结果列表显示在我当前正在搜索的输入下方的悬停“p”元素中。现在我有一个“p”,在每个输入下方显示 class=“options”结果。当我输入时,结果显示在每个“p”中,也就是说,悬停在每个输入下。有没有办法只引用当前输入的子项,还是我需要使用单独的函数显式引用所需的

每个输入?我在互联网上尝试了很多子选择器选项,但都没有奏效。代码如下。谢谢你的建议。

$(document).ready(function() 

//sets the chosen value into the input
$( ".options").on( "click", function(event) 
   var item =  $(event.target).text(); 
   $('#acctname').val(item);//place chosed result into the acctname input
   $('.options').hide();//hide result options after click
); 

//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() 
   var id = $(this).attr("id");
   var val = $(this).val();
   if (val === '')  //Validating, if "name" is empty.
   $('div > p').html('').show();
   else //If input is not empty.

        $.ajax(
           type: "POST",
           url: "../model/ajax/livesearch.php",
           data: id: id, val: val,
           success: function(html) //place the result into the p element and set the proper css
              $('div > p').html(html).show().css("position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white");
              
       );
   
);
);

更新:这就是我的 HTML 表单的结构。

<form action= "../model/dataentry.php?formname=enter_deposit" method="POST" id="ajaxform" name="ajaxform">
<div class = "label"><p1>Revenue Account Name</p1></div><div class = "field"><input class = "textinput" type="input" name="acctname" id="acctname" value = ""  autocomplete="off">
<p class = "options"></p></div>
<div class = "label"><p1>Revenue Account Number</p1></div><div class = "field"><input class = "textinput" type="input" name="acctno" id="acctno" value = ""  autocomplete="off">
<p class = "options"></p></div>
<input class = "submit" name = "Submit" type = "button" id = "ajaxsubmit" value = "Submit"  >
<input class = "submit" name = "Close" type = "button" id = "close" value = "Close"  >
</div>
</form>

【问题讨论】:

添加你的基本html结构,以便我们检查 $('div &gt; p') 更改为更具体的内容。 Lawrence,你能给我举个更具体的例子吗?这正是我在确定如何调整时遇到的麻烦。使该片段动态引用正确的元素。 【参考方案1】:

这就是你要找的吗? https://jqueryui.com/autocomplete/

【讨论】:

这基本上是我在没有插件的情况下实现的。我的麻烦是让结果出现在所需的位置。【参考方案2】:

我找到了解决问题的方法,以防有人好奇。通过为每个具有类“option”的 div 分配一个等于其父 id 加上“_opt”的 id(即“acctname”输入将有一个 id 为“acctname_opt”的子 div),我可以在我的函数中动态编辑 div id 以放置我想要的结果列表。这是我的新 javascript 代码。完美运行。谢谢大家的帮助。

$(document).ready(function() 

//sets the chosen value into the input
$( ".options").on( "click", function(event) 
   var item =  $(event.target).text(); 
   var clickedid = $(this).attr('id'); 
   var targetid = clickedid.split('_'); //remove the '_opt' suffice to get the target id
   $('#' + targetid).val(item);//place chosed result into the acctname input
   $('.options').hide();//hide result options after click
); 

//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() 
   var id = $(this).attr("id");
   var optid = id + '_opt'; //set the target element id
   var val = $(this).val();
   if (val === '')  //Validating, if "name" is empty.
   $('#' + optid).html('').show();
   else //If input is not empty.
        $.ajax(
           type: "POST",
           url: "../model/ajax/livesearch.php",
           data: id: id, val: val,
           success: function(html) //place the result into the p element and set the proper css
              $('#' + optid).html(html).show().css("position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white");
              
       );
   
);
);

【讨论】:

以上是关于具有多个输入的 Ajax 实时搜索的主要内容,如果未能解决你的问题,请参考以下文章

PHP Ajax 实时搜索只返回一个结果

PHP 实例 - AJAX 实时搜索

带AJAX和Jquery的asp.net MVC中的实时搜索数据

jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果

使用 AJAX 的多个实时搜索 Laravel

django - Ajax 实时搜索,我做错了啥?