Combo box with autocomplete

This recipe teaches you how to use a combo box to implement the autocomplete or autosuggest feature. The Actor Name textbox shows a list of suggestions as you type:

Getting ready...

This recipe uses sample data from the Sakila sample database. You can obtain the Sakila database as well as installation instructions at the MySQL website (http://dev.mysql.com/doc).

How to do it...

1. 1. Create the data store:

   var actorsDs=new Ext.data.JsonStore({
   url: 'actors.php',
   baseParams: { cmd: 'movies' },
   root: 'actors',
   totalProperty: 'count',
   id: 'actor_id',
   fields: [{name:'id',mapping: 'actor_id'}, { name: 'name', mapping: 'name' }
   ]
   });
   

2. 2. Define the actors combo box:

   var actorSearch={
   xtype: 'combo',
   fieldLabel: 'Actor Name',
   store: actorsDs,
   valueField: 'id',
   displayField: 'name',
   typeAhead: false,
   loadingText: 'Searching...',
   emptyText: 'Type the first characters of the name',
   minChars: 3,
   anchor: '100%',
   pageSize: 0,
   hideTrigger: true,
   editable: true,
   triggerAction: ...