Question

我是PHP和jQuery开发的新手，我正在为员工实施示例即时搜索。
我可以在输入 div输出时输入结果，但是，我无法将 div 中的结果分配给预期的搜索输入

这是我的JavaScript：

function searchq(){         
  var searchTxt=$("input[name='search']").val();            
  $.post("test_search_name.php", {searchVal: searchTxt}, function(output) {
    $("#output").html(output);
  });
}

页面test_search_name.php在我输入时返回结果我能够看到结果，现在我想选择特定的结果并将其分配给搜索输入。

这是我的HTML：

<form action="" method="post">
  <input type="text" name="search" placeholder="Search" onKeyup="searchq();"/>
</form>
<div id="output" class = "output">
  <!-- this is where the search results get stored -->
</div>

简而言之，当我们搜索Google时，我们会得到结果（在我的情况下，我得到了结果）和当我们选择结果时，它的值分配给输入（这是我想要实现的）

Answer 1

如果我理解你在寻找什么，并假设你在ajax返回上有一个可选元素，如span或列表（li），你可以使用{获取内容{1}}并将其分配到相关字段中：

jsFiddle： https://jsfiddle.net/8t4umwuh/

<强> HTML：

.html()

<强> JavaScript的：

<input type="text" name="search" placeholder="Click one of the list items" />
<div id="search">
    <!--
    I am going to assume your results come back in a list
    If not, something like <span class="trigger">Name 1</span> will also work.
    -->
    <ul>
        <li class="trigger">Name 1</li>
        <li class="trigger">Name 2</li>
        <li class="trigger">Name 3</li>
        <li class="trigger">Name 4</li>
    </ul>
</div>

Answer 2

根据我的理解，每次用户点击结果时，您都要求更新搜索框值。

如果是这样，这里简单演示了如何完成这项工作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selecting Search Results</title>
  <!-- NOTE: we need jQuery so lets include it -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
  <!-- NOTE: this is your search panel -->
  <div class="search-panel">
    <input type="text" class="search-box"/>
  </div>
  <!-- NOTE: this is your results container -->
  <div class="results-container">
    <div class="result">Lorem Ipsum 1</div>
    <div class="result">Lorem Ipsum 2</div>
    <div class="result">Lorem Ipsum 3</div>
    <div class="result">Lorem Ipsum 4</div>
    <div class="result">Lorem Ipsum 5</div>
    <div class="result">Lorem Ipsum 6</div>
    <div class="result">Lorem Ipsum 7</div>
    <div class="result">Lorem Ipsum 8</div>
  </div>
  <!-- NOTE: this simple script updates the search box value -->
  <script type="text/javascript">
    $(document).ready(function() {
      $(".results-container > .result").on("click", function(event) {
        $(".search-panel > .search-box").val($(this).text());
      });
    });
  </script>
</body>
</html>

以下是更新搜索框值的jQuery的细分：

// wait until we can safely manipulate the page.
$(document).ready(function() {
  // listen for click events on the results
  $(".results-container > .result").on("click", function(event) {
    // update the search box value
    $(".search-panel > .search-box").val($(this).text());
  });
});

如果您想使用Vanilla JavaScript，请改用：

// wait until we can safely manipulate the page.
document.addEventListener("DOMContentLoaded", function() {
  // get the results
  var results = document.querySelectorAll(".results-container > .result");
  for(var i = 0; i < results.length; i++) {
    // listen for click events on the results
    results[i].addEventListener("click", updateValue);
  }
  // this function handles the "click" event
  function updateValue() {
    // update the search box value
    document.querySelector(".search-panel > .search-box").value = (this.textContent || this.innerText);
  }
}, false);

此外，我还没有将此函数放在for循环中，因为将函数放入循环是不好的做法，有关详细信息，请阅读this页面。

祝你好运，一切顺利。

如何在点击时将搜索结果的值分配给输入元素？

2 个答案: