Autocomplete not working
I have embedded google searches with my simple search form. It displays the requests in the dropdown as expected, but when I click on the request it doesn't look for that request. 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;
}
source to share
The jQuery autocomplete you appear to be using has a select event .
This event fires when an item is selected. Since the value is already being filled in the input field, you only need to submit.
$("#search").autocomplete({
// irrelevant code omitted
select: function(event, ui){
$(this).parent('form').trigger('submit');
}
});
See also updated jsFiddle
source to share
Sorry ... I was trying to say that you can create your own autosuggest script.
1: First you need to create a dictionary. It will be some kind of array. 2: Now you need to have two items for the job: text input (INP) and a list to display the offer (LIST). In HTML it would be like this:
<input type="text" id="INP"/>
<ul id="LIST">
</ul>
3: Now you need to create certain scripts:
a) Find the value inside the input field. For example, in jQuery $ ('# INP') Shaft (). - this needs to be done every time a key is pressed, you can use $ (). keyup ..
b) Now you need to define a method to find the elements within the array that match the value. (use the 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 automatically fill in the input when a sentence is pressed.
<b> SCRIPT
$('.sugg').click(function(e){
$('#INP').val($(this).text());
$('#LIST').html("");
});
All this.
I completed and created a simple autosuggest script ...
you can find it on github .. [ https://github.com/ArjunAtlast/a2suggest> [1 ]
source to share