使用 AJAX 可点击的实时搜索结果答案

【问题标题】：Live search results clickable using AJAX使用 AJAX 可点击的实时搜索结果
【发布时间】：2018-02-14 19:11:54
【问题描述】：

我能够搜索并显示用户在 keyup 功能上键入的结果。但是现在当结果显示在我的<div> 标签中时，它们是不可点击的。有没有一种方法可以使它们可点击，并允许用户从实时搜索结果中选择多个结果。这是我到目前为止所尝试的。

HTML

<input type="text" id ="medication" name="medication" onkeyup="getsearch(this.value)"><br>
<div id="livesearch"></div>

JavaScript

function getsearch(val) {
  results = [];
  document.getElementById("livesearch").innerHTML = "";

  if (val.length == 0) {
    document.getElementById("livesearch").innerHTML = "";
    document.getElementById("livesearch").style.border = "0px";
    return;
  }
  console.log(s);
  console.log("val", val);
  if (val.length > 2) {
    for (var i = 0; i < s.length; i++) {
      for (key in s[i]) {
        if (s[i][key].indexOf(val) != -1) {

          $("#livesearch").append(s[i][key]);
          $("#livesearch").append("<br/>");
          results.push(s[i]);
        }
      }
    }
  }
  console.log(results);
};

【问题讨论】：

当然你可以通过为它分配一个点击事件处理程序来使任何东西成为可点击的。
@user9263373:- 你能指导我一下吗？
目前您正在做的是将带有<br> 的文本附加到您的#livesearch div 中。为了给它分配一个点击处理程序，你必须将它包装在一个 html 标记中（<li>、<span> 等）并给它一个类（即.appended）。然后创建一个点击处理程序$(document).on("click",".appended",function() {...some code here...});
我也很困惑你的变量 s 来自哪里？除非我没有看到任何东西，否则它不会在您的 getsearch 函数中的任何位置进行初始化或设置
更重要的是，您可以直接在#livesearch div 中插入多项选择。

标签： javascript jquery ajax

【解决方案1】：

还有一些其他的事情我会在这里做不同的事情，但就你想要做的事情而言，这应该是可行的。

if(val.length>2) {
         for (var i = 0; i < s.length; i++) {
             for (key in s[i]) {
                 if (s[i][key].indexOf(val) != -1) {
                     var newDom = $('<div><\div>'); //create a DOM element to wrap each of the return  text in.

                     newDom.text(s[i][key]); 

                     $("#livesearch").append(newDom);

                     results.push(s[i]);
                 }
             }
         }
     }

然后您可以通过这种方式将点击事件分配给您动态创建的 DOM。

$('#livesearch').on('click', 'div', myDoStuffFunc);

 function myDoStuffFunc(){
     // this is fired from the click event
 }

【讨论】：