I'm trying to add an autosuggest function to my searchbar using jquery. But I'm unsuccessful in my attempts. I've followed the tutorials but still don't get it.
The hide().show(2000) works on my searchbar but not the rest. What have I missed?
EDIT: I've kept digging for solutions and still no luck. I've edited my code with my new changes. I've found that function online at https://goodies.pixabay.com/jquery/auto-complete/demo.html and it works on their site.
EDIT2: I've managed to get it to work as a stand alone site. Is it possible that something is blocking it on my real site? If so, how can I overwrite the block?
$(function(){
$('#search').autoComplete({
minChars: 2,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['ActionScript', 'AppleScript', 'Asp', ...];
var matches = [];
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches);
}
});
});
My html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testsite</title>
<script>"jQuery-autoComplete-master/jquery.auto-complete.min.js"</script>
<script>"jQuery-autoComplete-master/jquery.auto-complete.js"</script>
<script>"jQuery-autoComplete-master/jquery.auto-complete.css"</script>
</head>
<body>
<div>
<h1>Search field</h1>
<input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="ActionScript or AppleScript"><br>
<div id="results"></div>
<p></p>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
//function for autocomplete
</script>
</div>
src
set to a relative path is useless on StackOverlow. Also, your firstjQuery
is served overhttp
and will be rejected asMixed Content
, if you the rest is served overhttps
. Finally, you haven't included theautocomplete
plugin.