How can I assign value of search result to a input element on click?

Question

I'm new to PHP and jQuery development and I'm implementing a sample instant search for the employees.
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.

This is my 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.
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:

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

Hi Guruprasad, The output I'm getting is in below format :
res2

res4
but, the problem is when I click on any of the results the value that I get on click is the entire results instead of specific one. How do I get the specific value. — Santosh Gadhave, May 30 '16 at 07:53

Rasclatt · Answer 1 · 2016-05-27T05:18:50.880

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:

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

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:

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

edited May 27 '16 at 05:18

answered May 27 '16 at 04:34

Rasclatt

12,498
3
25
33

Well done for taking the time to make a JSFiddle example, +1. Also could you please explain what the **second** parameter in your on function does? I've never come across an on function with three parameters. I'm talking about this line: `$(this).on("click", ".trigger", function() {` – May 27 '16 at 04:57
@Mango Here is why I do it (this is presumably dynamic return via ajax). http://stackoverflow.com/questions/15090942/ I ran into this a few too many times, so it's force of habit now. – Rasclatt May 27 '16 at 05:10
Rasclatt, Thanks for the info. I was unaware of this. – May 27 '16 at 05:13

score 1 · Accepted Answer · 2016-05-27T05:07:22.457

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:

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

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

Good luck and all the best.

Thanks Mango for the valuable reply. In my case - The output I'm getting is in below format :
res2

res4
but, the problem is when I click on any of the results the value that I get on click is the entire results instead of specific one and when I assign the value to the search field - all the values get assigned instead of the specific value. Please suggest. — Santosh Gadhave, May 30 '16 at 08:00

How can I assign value of search result to a input element on click?

2 Answers2