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

Question

我能够搜索并显示用户在键入功能上键入的结果。 但是现在当结果显示在我的<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);
};

Answer 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]);
                 }
             }
         }
     }

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

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

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