jQuery UI Autocomplete
Håller på att skapa en textbox som skall ha autocomplete genom Google Suggestionqueries.
Jag har en php-fil som hanterar resquestet mot google
function getData($query){
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,$query);
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
if(empty($buffer)){
return false;
}
$var=substr($buffer,strpos($buffer,',')+1);
$var=str_replace(']]',']',$var);
return $var;
}
function fixQuery($q){
return str_replace(' ','%20',$q);
}
echo getData('http://suggestqueries.google.com/complete/search?client=firef...'.fixQuery($_POST['querytext']));
Denna ger output på formen
["suggestion1","suggestion2","suggestion3"]
Vilket det skall vara enligt http://jqueryui.com/demos/autocomplete/
Min HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min...." type="text/javascript"></script>
<link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<title>Untitled 2</title>
<script type="text/javascript">
$(document).ready(function(){
$('#box').keyup(function(){
var text=$(this).val();
$.post('http://path/to/php/file.php', {querytext:text}, function(response) {
$('#test').html(response);
$( "#box" ).autocomplete( "option", "source", response);
console.log($( "#box" ).autocomplete( "option", "source"));
});
});
$('#box').autocomplete({
delay:1000,
minLength:2
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="box" />
<div id="test"></div>
</form>
</body>
</html>
Requestet mot min php-fil fungerar då resultatet av detta visas i test div'en. Men med autocompletet får en GET error i consolen i chrome.
När jag skriver sc i boxen får jag denna output
I div'en test:
["scrabble cheat","scrabble word finder","scholar","scrabble dictionary","scottrade","scrabble","scrabble help","scary maze game","scabies","scholastic"]
Från consolen:
GET http://pathToHtmlFile/[%22scrabble%20cheat%22,%22scrabble%20word%20finder%22,%22scholar%22,%22scrabble%20dictionary%22,%22scottrade%22,%22scrabble%22,%22scrabble%20help%22,%22scary%20maze%20game%22,%22scabies%22,%22scholastic%22]?term=sc 404 (Not Found) jquery.min.js:4
f.support.ajax.f.ajaxTransport.send jquery.min.js:4
f.extend.ajax jquery.min.js:4
a.widget._initSource.a.isArray.options.source.string.source jquery-ui-1.8.20.custom.min.js:17
a.widget._search jquery-ui-1.8.20.custom.min.js:17
a.widget.search jquery-ui-1.8.20.custom.min.js:17
(anonymous function)
Har testat att bara ha en statisk variabel som source tilll autocomplete och det fungerar.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min...." type="text/javascript"></script>
<link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<title>Untitled 2</title>
<script type="text/javascript">
$(document).ready(function(){
var ac =['swec','sweclockers','forum'];
$('#box').keyup(function(){
var text=$(this).val();
$.post('http://snilius.com/ac/query.php', {querytext:text}, function(response) {
$('#test').html(response);
});
});
$('#box').autocomplete({
delay:1000,
minLength:2,
source:ac
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="box" />
<div id="test"></div>
</form>
</body>
</html>
Vad för jag för fel?
FreeNAS 3U | 8GB | 2x2x3TB ProxMox i7-8700K | 32GB Desktop Dell 22" | Benq 22" | i5-smth | 16GB | Intel 520 120GB | 500GB | Arch
