CODEWITHSUNDEEP
phpjqueryajaxautocomplete
nikki
nikki

Reputation: 373

auto suggest ajax for php

i have an html form ,php scrip and jquery. i need a ajax code to make auto suggest from my php script. following is the code...

Form.html 

  <html>
    <head>
      <script src="jquery1.6.4.min.js" type="text/javascript"></script>  
      <script src="jquery.jSuggest.js" type="text/javascript"></script>  
      <link href="jSuggest.css" rel="stylesheet" type="text/css" />  
     </head>  
     <body>  
       <form id="form1" name="form1" method="post" action="#">  
          <input type="text" name="TagsInputField" id="TagsInputField"/>  
        </form>  
      </body>  
  </html>

TEST.php 

  <?php 
      include("bc/script/core/dbcon.php");  
      $input = $_POST['TagsInputField'];  
      $data = array();  
      // query your DataBase here looking for a match to $input  
      $query = mysql_query("SELECT * FROM user WHERE username LIKE '%$input%'");  
      while ($row = mysql_fetch_assoc($query)) {  
        $json = array();  
        $json['value'] = $row['id'];  
        $json['name'] = $row['username'];  
        $data[] = $json;  
      }  
      header("Content-type: application/json");  
      echo json_encode($data);  
   ?>

jquery.jSuggest.js

 $(function() {
    var dataSource = {
        items: [
            {
            value: "21",
            name: "Mick Jagger"},
        {
            value: "43",
            name: "Johnny Storm"},
        {
            value: "46",
            name: "Richard Hatch"},
        {
            value: "54",
            name: "Kelly Slater"},
        {
            value: "79",
            name: "Michael Jordan"}
        ]

    };

    $('#TagsInputField').jSuggest({
        source: dataSource.items,
        selectedItemProp: "name",
        seekVal: "name",
        selectionAdded: function(elem, data) {
            console.log(data.name);
        },
        selectionRemoved: function(elem, data) {
            console.log(data.name);
            elem.remove();
        }
    });
});

notice the pointer "source" it is refering to an object "dataSource.items" to read suggesions. can any one help me to write an ajax code to read suggesions fom php file which is returning a json.

Upvotes: 0

Views: 1637

Answers (1)

Tushar
Tushar

Reputation: 8049

jSuggest makes GET requests by default. You have to add:

type: "POST"

in the rules.

There are a few other major errors in your jSuggest rules. You should read the documentation: http://scottreeddesign.com/project/jsuggest

Upvotes: 1

Related Questions