Question

I want to make my input field to have jquery autocomplete where I fetch company names from the database and display it to the user. Below is a snippet I found on jquery.com. I want to rewrite it to fit my needs and I need some help.

$(function() {
  function log( message ) {
   $( "<div/>" ).text( message ).prependTo( "#log" );
   $( "#log" ).attr( "scrollTop", 0 );
  }

  $( "#company_name" ).autocomplete({
   source: function( request, response ) {
    $.ajax({
     url: "inc/company_name.php",
     dataType: "jsonp",
     data: {
      featureClass: "P",
      style: "full",
      maxRows: 12,
      name_startsWith: request.term
     },
     success: function( data ) {
      response( $.map( data.geonames, function( item ) {
       return {
        label: item.name,
        value: item.name
       }
      }));
     }
    });
   },
   minLength: 2,
   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" );
   }
  });
});

in the source attribute, upon sucess, I want to replace

response( $.map( data.geonames,
    function( item ) { ... }

with the proper code to display my json object data. Below is my json object created in PHP.

<?php
 $arr = array  ( 'item' => 'company name' );
 echo json_encode($arr);
?>

Answer 1

Try their autocomplete plugin:

http://docs.jquery.com/Plugins/autocomplete

The Example:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);

You could modify it to fit yours by using an ajaxloader from something like ARTE:

http://plugins.jquery.com/node/12682

You would use this code:

/* init the arte engine */
$.arte({'ajax_url':'remote_xml_file_url'}).add_action("xml_node", fct);

/* the function which will be called every tick with the new node */
function fct(data){
  window.data = data;
}