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

Question

I'm new to PHP and jQuery development and I'm implementing a sample instant search for the employees .我是 PHP 和 jQuery 开发的新手，我正在为员工实施示例即时搜索。
I am able to get the results as I type and holding the results in a div output but, I'm not able to assign the results in div to the intended search input.我能够在我键入并将结果保存在div 输出中时获得结果，但是，我无法将div 中的结果分配给预期的搜索输入。

This is my JavaScript:这是我的 JavaScript：

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

The page test_search_name.php is returning the results as I type.页面 test_search_name.php 在我输入时返回结果。
I'm able to see the results and now I want to select specific result and assign it to the search input.我能够看到结果，现在我想选择特定的结果并将其分配给搜索输入。

This is my HTML:这是我的 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>

In short, when we search on Google we get the results (In my case I have got the results) and when we select the result its value assigned to the input (this what I want to achieve) .简而言之，当我们在 Google 上搜索时，我们会得到结果（在我的例子中我得到了结果），当我们选择结果时，它的值分配给输入（这是我想要实现的） 。

Answer 1

If I understand what you are looking for, and presuming that you have a selectable element like a span or a list ( li ) on the ajax return, you can just get the contents using .html() and assign it into the field in question:如果我了解您要查找的内容，并假设您在 ajax 返回上有一个可选元素，如span或列表 ( li )，则您可以使用.html()获取内容并将其分配到相关字段中：

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

HTML: HTML：

<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>

JavaScript: JavaScript：

$(document).ready(function() {
    $(this).on("click", ".trigger", function() {
        var content = $(this).html();
        $("input[name='search']").val(content);
    });
});

Answer 2

From what I understand you are asking to update the search box value every time the user clicks on a result.据我了解，每次用户单击结果时，您都要求更新搜索框值。

If so here is a simple demonstration of how you can get that done:如果是这样，这里有一个简单的演示，说明如何完成这项工作：

<!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>

Here is a break down of the jQuery that updates the search box value:以下是更新搜索框值的 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());
  });
});

If you would like to use Vanilla JavaScript then use this instead:如果您想使用 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);

Also I have not put this function in the for loop because it is bad practice to put functions in loops, for more info read this page.此外，我没有将此函数放入 for 循环中，因为将函数放入循环中是不好的做法，有关更多信息，请阅读此页面。

Good luck and all the best.祝你好运，万事如意。

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

问题描述

2 个解决方案

解决方案1
0 2016-05-27 04:34:42

解决方案2
0 已采纳

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

问题描述

2 个解决方案

解决方案1 0 2016-05-27 04:34:42

解决方案2 0 已采纳

解决方案1
0 2016-05-27 04:34:42

解决方案2
0 已采纳