Home/ Questions/Q 4054764
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T14:37:01+00:00

I want to do some autosuggest for my text field, using this plugin AutoSuggest

  • 0

I want to do some autosuggest for my text field, using this plugin AutoSuggest jQuery Plugin

I have an array, already json_encoded, and the files on the server, js, css, but Im not getting yet how the example works, here my code,

<html>
 <head>
  <title>test-data</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="inc/css/admin_style.css" rel="stylesheet" type="text/css">
     <link href="inc/css/autoSuggest.css" rel="stylesheet" type="text/css">
     <script language="javascript" src="inc/js/functions.js"></script>
     <script language="javascript" src="inc/js/jquery-1.5.1.js"></script>
     <script language="javascript" src="inc/js/jquery.autoSuggest.js"></script>
     <script language="javascript" type="text/javascript">
      </script>
 </head>

 <body>
 <center><br><font class="title">test</font></center>

  <form action="dataAll.php" method="post">
   Name: <input type="text" name="fname" />
  <input type="submit" />
   </form>

   <p>&nbsp;</p>
  <p>JSON</p>
  <p>&nbsp;</p>
  <?php
  $encoded =  json_encode ($familyNames);
  echo $encoded;
   ?>
  </body>
  </html>

so Im supposed to put this code,

 $(function(){
 $("input[type=text]").autoSuggest(data);
 });
  • but the question is where??( as if I put it inside the php tags, it gives me an error
  • where should I put the name of my json formatted array? “$encoded” for the function to recognize that is the source of data?

thanks a lot!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve got all the pieces, but your order/methodology is a bit off. Try creating a second file, named something like ajax.php, and place all of your php code in there. To ensure you are outputting good JSON, add the line header('Content-Type: text/json; charset=ISO-8859-1'); at the very beginning of the ajax.php file (you must set the header before any output is sent or you’ll get an error). Now you’ve got to request your suggestion data:

    $(document).ready(function() {   // Runs when your page is loaded in the user's browser
    $.getJSON('ajax.php', function(data) { // Runs ajax.php, then executes an anonymous function to handle the response
        $('input[name="fname"]').autoSuggest(data); // Set your input field to use automatic suggestions with the returned data
    }); // end getJSON
}); // end ready

    This code simply executes an asynchronous HTTP request for ajax.php, and hands off the returned JSON data to the auto-suggest jQuery plugin. Place it inside a <script type="text/javascript"></script> tag. It will run once when the page loads due to the use of $(document).ready(...). I added the small optimization (input[name="fname"]) so jQuery doesn’t attempt to attach the auto suggestion functionality to every text input you have on your page. If thats what you wanted to do (unlikely), just change it back to input[type=text].

    You really do not need a separate php file to get this to work. There is nothing stopping you from doing it all in one file, but you’ll soon realize how cluttered and unmanageable that can get. For me, its easiest to think of my “ajaxy” php code as a single, modular piece of my web application.

    Be sure to reference these pages for detailed information:

    • 0