Auto complete doesn't work

Question

I have integrated google search queries with my simple search form. It is showing queries in dropdown as expected but when I click on the query it doesn't search for that query. Here is the code:

http://jsfiddle.net/enetqz54/21/

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form method="get" action="search.php" class="searchform cf">
    <input id="search" name="q" type="text" placeholder="Start typing a search term">
    <button type="submit">Search</button>
</form>

JS:

var suggestCallBack; // global var for autocomplete jsonp

$(document).ready(function() {
    $("#search").autocomplete({
        source: function(request, response) {
            $.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
                "hl": "en", // Language                  
                "jsonp": "suggestCallBack", // jsonp callback function name
                "q": request.term, // query term
                "client": "youtube" // force youtube style response, i.e. jsonp
            });
            suggestCallBack = function(data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    suggestions.push({
                        "value": val[0]
                    });
                });
                suggestions.length = 5; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});

CSS

*,*:after,*:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

 .cf:before,
 .cf:after {
     content:"";
     display:table;
 }
 .cf:after {
     clear:both;
 }

 body {
   background: #3aaae8;
   color: #fff;
   font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
 }

 a,a:visited {   color:#fff }

 /*--------------------------------------------------------------
 2.0 - SEARCH FORM
 --------------------------------------------------------------*/ .searchform {   background:#f4f4f4;  
 background:rgba(244,244,244,.79);   border: 1px solid #d3d3d3;
     left: 50%;   padding: 2px 5px;   position: absolute;
     margin: -22px 0 0 -170px;
     top: 50%;   width:339px;   box-shadow:0 4px 9px rgba(0,0,0,.37);   -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);   -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);   border-radius: 10px;   -moz-border-radius:
 10px;   -webkit-border-radius: 10px }

 .searchform input, .searchform button {
     float: left } .searchform input {
     background:#fefefe;
     border: none;
     font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
     margin-right: 5px;
     padding: 10px;
     width: 216px;
     box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);   border-radius: 9px;   -moz-border-radius:
 9px;   -webkit-border-radius: 9px }
     .searchform input:focus {
         outline: none;
         box-shadow:0 0 4px #0d76be inset;
         -moz-box-shadow:0 0 4px #0d76be inset;
         -webkit-box-shadow:0 0 4px #0d76be inset;
     }
     .searchform input::-webkit-input-placeholder {
       font-style: italic;
       line-height: 15px
     }

     .searchform input:-moz-placeholder {
       font-style: italic;
       line-height: 15px
     }

 .searchform button {
     background: rgb(52,173,236);
     background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)),
 color-stop(100%,rgba(38,145,220,1)));
     background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
     border: none;
     color:#fff;
     cursor: pointer;
     font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
     padding: 10px;
     width:106px;
     box-shadow: 0 0 2px #2692dd inset;
     -moz-box-shadow: 0 0 2px #2692dd inset;
     -webkit-box-shadow: 0 0 2px #2692dd inset;   border-radius: 9px;   -moz-border-radius: 9px;   -webkit-border-radius: 9px; }
     .searchform button:hover {
         opacity:.9;
     }

Answer 1

jQuery's autocomplete, which apparently you are using, has a select event.

This event gets triggered when an item get selected. Since the value already gets populated into the input field, the only thing you have to do is submit.

$("#search").autocomplete({
    // irrelevant code omitted

    select: function(event, ui){
        $(this).parent('form').trigger('submit');
    }

});

See also this updated jsFiddle

Answer 2

Sorry.... what i was trying to say is that you can create your own autosuggest script.

1: Ist you need to create a dictionary.This would be an array of some kind. 2: Now you need to have two elements for the job a text-input (INP) and a list to show suggestion (LIST). In HTML it'd be like this:

<input type="text" id="INP"/>
<ul id="LIST">
</ul>

3:Now you need to create certain scripts:

a) To find the value inside input box. example , in jQuery $('#INP').val(); -this has to be executed each time the key is pressed you can use $().keyup..

b) Now you have to define a method to find the items inside the array that match with the value.(use indexOf() function in javascript)
JAVASCRIPT

var i =0;
var SUGG="";
while(i<array.length){
   if(array[i].indexOf($('#INP').val().toString()!=-1){
      SUGG+="<li><a class='sugg'>"+array[i]+"</a></li>"
   }
}
$('#LIST').html(SUGG);

b) a method to autofill the input when the suggestion is clicked.
SCRIPT

$('.sugg').click(function(e){
    $('#INP').val($(this).text());
    $('#LIST').html("");
});

That's all.

I have completed and created a simple autosuggest script...

you can find it on github.. [https://github.com/ArjunAtlast/a2suggest][1]