javascript - Add items from json encoded array to auto complete input box -

i have php file returning json encoded array , want show items in json array show in auto complete search box. code have in search3.php is:

<?php include 'db_connect.php'; $link = mysqli_connect($host, $username, $password, $db); if(!link){     echo "db connection error"; } $output = '' ; $output2 = '' ; if (isset($_post['searchval'])){ $return_arr = array(); $searchq = $_post['searchval']; //$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); $query = mysqli_query($link, "select * `organisations_info` `organisation_name` '%$searchq%'")or die("could not search!"); $count = mysqli_num_rows($query); if($count == 0){     $output = '<div>no results!</div>'; }else{     while($row = mysqli_fetch_array($query)){         $orgname = $row['organisation_name'];         $orgid = $row['organisation_id'];         $return_arr[] = $row['subscription_type'];         //$output = echo "<option value='".$orgname."'>" . $orgname . "</option>";         $output = $orgname;          $output2 = $orgid;          $output3 = $subs;          //$output = '<div>'.$orgname.'</div>';     } } } echo json_encode($return_arr);  ?> 

i using javascript add items json input box show auto complete items.

<script type="text/javascript"> $(function() {  //autocomplete $(".auto").autocomplete({     source: "search3.php",     minlength: 1 });                  }); </script> 

the input field this:

search: <input class="auto" type="text" required name="search"> 

what doing wrong?

you need json string first , can use string source autocomplete function

$.ajax({   url: "source3.php",   cache: false,   success: function(json_string){    $(".auto").autocomplete({      source: json_string,      minlength: 1    });              } }); 

if want json on key event, try this(see remote json datasource ) :-

  <script>  $(function() { function log( message ) {   $( "<div>" ).text( message ).prependto( "#log" );   $( "#log" ).scrolltop( 0 ); }  $( "#city" ).autocomplete({   source: function( request, response ) {     $.ajax({       url: "http://gd.geobytes.com/autocompletecity",       datatype: "jsonp",       data: {         q: request.term       },       success: function( data ) {         response( data );       }     });   },   minlength: 3,   select: function( event, ui ) {     log( ui.item ?       "selected: " + ui.item.label :       "nothing selected, input " + this.value);   },   open: function() {     $( ).removeclass( "ui-corner-all" ).addclass( "ui-corner-top" );   },   close: function() {     $( ).removeclass( "ui-corner-top" ).addclass( "ui-corner-all" );   } }); 

});