Tenho este código
<script>
$(window).load(function(){
var source = [{
label: "Tom Smith",
value: "1234"
}, {
label: "Tommy Smith",
value: "12321"
}];
$("#descricao").autocomplete({
source: source,
minLength: 1, //quantidade de caracteres para começar a buscar
select: function (event, ui) {
//evento de quando você seleciona uma opção
$("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
$("#id").val(ui.item.value); //seto o id para ir para seu backend :D
event.preventDefault();
}
});
});//]]>
</script>
Gostaria que os valores da minha variável var source
fossem recebidos via ajax , então adaptei da seguinte forma:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<title>jQueryUI 1.8.14 Autocomplete</title>
<script type="text/javascript">//<![CDATA[
function busca(x){
var url = "autocomplete.php?q=" + x;
$.ajax({
type:"GET",
url: url,
dataType:'text',
success : function(data)
{
var source = data ;
}
});
}
$(window).load(function(){
$("#descricao").autocomplete({
source: source,
minLength: 1, //quantidade de caracteres para começar a buscar
select: function (event, ui) {
//evento de quando você seleciona uma opção
$("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
$("#id").val(ui.item.value); //seto o id para ir para seu backend :D
event.preventDefault();
}
});
});//]]>
</script>
</head>
<body>
<input type="text" id="descricao" onkeyup="busca(this.value);" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="text" name="idQueVaiParaSeuBackEnd" id="id">
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
<div id="resultado"></div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 20px; left: 0px; display: none; width: 167px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Tom Smith</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Tommy Smith</a></li></ul></body></html>
Mas daí os valores não estão sendo interpretados pelo meu código.
Abaixo, segue o código do arquivo autocomplete.php. Ele gera o result em um formato que, no esperado, deveria ser interpretado pelo javascript
<?php
if (!empty($_GET['q'])){
$link = new mysqli("localhost", "root", "minhasenha", "meudb");
$produto = $_GET['q'];
$produto = '%'.$produto.'%';
$busca_produtos = $link->prepare("SELECT id, nome_com from cadastro where nome_com LIKE ? LIMIT 10");
$busca_produtos->bind_param("s", $produto);
$busca_produtos->bind_result($id, $nome_com);
$busca_produtos->execute();
$busca_produtos->store_result();
if($busca_produtos->num_rows() > 0){
echo "[";
while ($busca_produtos->fetch()) {
echo "{ label: \"$nome_com\", value: \"$id\" },";
}
echo "];";
// Esta chave fecha o while ($busca_produtos->fetch()) {
} // Esta cahve fecha o if($busca_produtos->num_rows() > 0){
} // Esta chave fecha o if (!empty($_GET['q'])){
?>
Como faço pra receber o resultado via ajax e armazenar na variável?