How to perform query via AJAX and store the data in a javascript variable?

Question

How to perform query via AJAX and store the data in a javascript variable?

Navigation

#1 by (1 votes)

1

I have this code

<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>

I would like the values of my var source variable to be received via ajax, so I adapted it as follows:

<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><linkrel="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>

But then the values are not being interpreted by my code.

Below is the code from the autocomplete.php file. It generates the result in a format that, expected, should be interpreted by 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'])){
?>

The end result will be this:

How do I get the result via ajax and store it in the variable?

php javascript html ajax

asked by anonymous 02.08.2017 / 14:30

1 answer

Error making an insert in sql server with c # [closed] I can not add a reference to my program

score 1 · Answer 1

By the way Javascript works, the page executes all the code that is in it in order. The method that you define as successful callback in the ajax request, however, only executes when the server returns - after assembling your autocomplete .

The solution is to mount your autocomplete within a function, and execute that function within the callback of the ajax request.

So:

var montaAutocomplete = function (source) {
    $("#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);
            $("#id").val(ui.item.value);
            event.preventDefault();
        }
    });
}

And on request:

$.ajax({
    type:"GET",
    url: url,
    dataType:'text',
    success : function(data) {
        montarAutocomplete(data);
    }
});