PHP creating autocomplete into search box

Question

Hi guys so i am new to php and trying to create an autocomplete function into my search box. It all works fine and is running but for some reason when i search for the product and it appears i am trying to make it so that the place i search i can just click on it and then it goes to that search box. However for some reason i am not sure why this is.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dashboard</title>
  </head>
  <body>

    <div class="container">
        <input type="text" name='search_term' id="search_term" class="searchFunction">
        <input type="submit" value="Search">
        <div class="dropdown">
            <ul class="result"></ul>
        </div>
    </div>

I was watching a couple of tutorails and the way the guy did it was use this function $('.searchFunction').attr('value', result_value ); however this does not work for me, any help on this matter would be great

P.S i know about the sql injections :) but for now just sorting out one problem at a time

@AliKhanusiya just the fact that the autocomplete is not working when the user clicks on the displayed result — Nevershow2016, Feb 29 '16 at 22:07
Exanple that i want : http://jsfiddle.net/rdworth/ebduf/ but i am not sure how to implement it into mine — Nevershow2016, Feb 29 '16 at 22:16
i have tried this and nothing happens, i am not sure why this is those :( — Nevershow2016, Feb 29 '16 at 22:22
Then try changing `$(this).text()` to `$(this).val()` where you're setting `result_value` and see if you get anything from the console log. — DiddleDot, Feb 29 '16 at 22:23

DiddleDot · Accepted Answer · 2016-02-29T22:52:50.810

0

Take your click function out of your keyup function and change your click function like I have it below.

$( document ).ready( function() {
    $('.searchFunction').keyup( function( event ) {
       var search_term = $("#search_term").val();

       $.post( document.location.href, { search_term:search_term }, function( data ) {
           $('.result').html( data );    
        });
    });

    $('.result').on('click', 'li', function() {
        var result_value = $(this).text();
        $('#search_term').val(result_value);
        $('.result').html('');
    });
});

edited Feb 29 '16 at 22:52

answered Feb 29 '16 at 22:25

DiddleDot

745
5
16

Unfortunately nothing :( – Nevershow2016 Feb 29 '16 at 22:29
Did you console log out the result_value to see if it returned anything? – DiddleDot Feb 29 '16 at 22:31
it did not, so i am not sure if this is the right way , I sed this video https://www.youtube.com/watch?v=4fwOCgenuXI and if u go through to u can see his works like mine but for some reason mine is not doing the autocomplete – Nevershow2016 Feb 29 '16 at 22:34
Which bit do i take out and replace? i am confused – Nevershow2016 Feb 29 '16 at 22:39
See how I took the `$('.result').on('click') ` function outside of your `$('.searchFunction').keyup` function? – DiddleDot Feb 29 '16 at 22:40
i see that but i tried that and now it does not work at all – Nevershow2016 Feb 29 '16 at 22:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104926/discussion-between-diddle-dot-and-nevershow2016). – DiddleDot Feb 29 '16 at 22:41

PHP creating autocomplete into search box

1 Answers1