By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,903 Members | 1,439 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,903 IT Pros & Developers. It's quick & easy.

How to use jQuery's formatItem, formatMatch, & formatResult options for autocomplete?

P: 75

I am making use of jQuery's .autocomplete plugin, and I would appreciate some assistance formating the results that show up in the dropdown menu that populates when text is written into the input field.

In order to get the data to populate the autocomplete, I pull from mySQL using this PHP:
Expand|Select|Wrap|Line Numbers
  1.  $sql = ( 'SELECT tag, title, author, content, id FROM labels' );
  2.  $result = mysql_query( $sql );
  3.  $Response = array();
  4.  while( $row = mysql_fetch_object( $result ) ){
  5.  $Response[] = array(
  6.                            "id" => $row->id,
  7.                            "name" => $row->tag . ": " . $row->title . ": " . $row->content .""
  8.                          );
  9.  }
When a user selects the option from the autocomplete that is best for them, I convert the "name" above into the "id" using this method:
Expand|Select|Wrap|Line Numbers
  1.   var AllTagData = <?= json_encode ( $Response ); ?>;
  2.   var CRs = [];
  4.   for(var i in AllTagData){
  5.      Tags.push(AllTagData[i].name);
  6.   }
  8.   function getIdFromTag(_name){
  9.       for(var i in AllTagData){
  10.           if(_name == AllTagData[i].name){
  11.               return AllTagData[i].id;
  12.           }
  13.       }
  14.   }
So far, so good. Finally, I use the jQuery autocomplete plugin to output the data for the user:
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function(){
  2.      $("#Responses").autocomplete({
  3.          source: Tags,
  4.          matchContains: true,
  5.          autoFill: true,
  6.          select: function(e, ui){
  7.              $("#hidden_tags").val( getIdFromTags($("#Responses").val()) );
  8.           }});
  9.  });
This final portion of the code is where I need help implementing the formatItem, formatMatch, and formatResult options.

From the PHP given above, I output Tags, Title, and Content all in the "name". The way that I would like to format my autocomplete options for the user is
  • Show Tags & Title
  • Hide Content
  • Search through Tags, Title, and Content for possible matches
Therefore, even though I want the autocomplete to search through Content, I don't want Content showing up in the populated autocomplete list. I only want the Tags and Title to show.

I've been having a lot of trouble with this and have searched quite extensively to find an answer and would really appreciate any help you can give on how to accomplish this. Please ask any follow up questions if you need further clarification. Thanks!
Nov 20 '10 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.