Add items from json encoded array to auto complete input box

Question

I have a php file returning a json encoded array and I want to show the items in the json array to show in an auto complete search box. The code I have in the 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 * FROM `organisations_info` WHERE `Organisation_Name` LIKE '%$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 am using this javascript to add the items from the json to the input box to show auto complete items.

<script type="text/javascript">
$(function() {

//autocomplete
$(".auto").autocomplete({
    source: "search3.php",
    minLength: 1
});                

});
</script>

The input field is this:

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

What am I doing wrong?

You don't have record inside jquery. For this you need AJAX function. You need to send request to server on input change event. `autocomplete()` will only work with javascript array. — Yash, Apr 19 '16 at 05:05
@Yash, how can I do this? I don't know ajax and still starting with js — Yohan Blake, Apr 19 '16 at 05:12
check [this](http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get) for `AJAX` request. and check [this](http://www.w3schools.com/jquery/event_change.asp) for `change event`. — Yash, Apr 19 '16 at 05:15
@Yash, so do I replace my js function with the ajax function? and to where do I add the change event? — Yohan Blake, Apr 19 '16 at 05:19

Deval Khandelwal · Answer 1 · 2016-04-19T05:32:00.950

You need to get the JSON as a string first and then you can use the string to be a source for your autocomplete function

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

If you want to get 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 was " + this.value);
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
});

});

score 0 · Answer 2 · answered Apr 19 '16 at 05:32

For suggestion you have to use AJAX function.

Use following jquery code:

$(document).ready(function(){
    $(".auto").keyup(function(){
        $.ajax({
        type: "POST",
        url: "source3.php",
        data:'searchVal='+$(this).val(),
        success: function(data){
            var json_string = $.parseJSON(data);
            $(".auto").autocomplete({
             source: json_string,
             minLength: 1
            }); 
        }
        });
    });
});

For more details, check this.

Add items from json encoded array to auto complete input box

2 Answers2