View Full Version : How to implement auto suggestions for textbox in extjs 4?

9 May 2012, 8:56 PM
Hi All,

I want to implement auto suggestion feature in textbox. Is there any plugin or extensions are available in extjs 4?

If somebody has implemented, please share the code.

10 May 2012, 12:20 AM
Auto-suggest style functionality is actually available through the ComboBox class. You can turn the trigger off if you want to make it look more like a combobox.

The forum search example shows this functionality mixed with a custom template for the display though a more traditional google suggest look and feel will be the default if you just set it up with a remote data store and turn off the trigger.


14 May 2012, 1:18 AM
Hi ,

Thanks for your reply.

I just gone through the code. i dont know how its work ? i couldn't see any ajax calls in the firebug.

can you help me to customize the code for my module?

http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html (http://docs.sencha.com/ext-js/4-1/#%21/example/form/forum-search.html%20)

Ext.require([ 'Ext.data.*', 'Ext.form.*' ]); Ext.onReady(function(){ Ext.define("Post", { extend: 'Ext.data.Model', proxy: { type: 'jsonp', url : 'http://www.sencha.com/forum/topics-remote.php', reader: { type: 'json', root: 'topics', totalProperty: 'totalCount' } }, fields: [ {name: 'id', mapping: 'post_id'}, {name: 'title', mapping: 'topic_title'}, {name: 'topicId', mapping: 'topic_id'}, {name: 'author', mapping: 'author'}, {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'}, {name: 'excerpt', mapping: 'post_text'} ] }); ds = Ext.create('Ext.data.Store', { pageSize: 10, model: 'Post' }); panel = Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), title: 'Search the Ext Forums', width: 600, bodyPadding: 10, layout: 'anchor', items: [{ xtype: 'combo', store: ds, displayField: 'title', typeAhead: false, hideLabel: true, hideTrigger:true, anchor: '100%', listConfig: { loadingText: 'Searching...', emptyText: 'No matching posts found.', // Custom rendering template for each item getInnerTpl: function() { return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' + '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' + '{excerpt}' + '</a>'; } }, pageSize: 10 }, { xtype: 'component', style: 'margin-top:10px', html: 'Live search requires a minimum of 4 characters.' }] }); });