Question

我能够搜索并显示用户在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);
};

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
 }

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

1 个答案: