Using Auto Complete with ExtJS Text Field

[nikhilwalker]

Hi All,

I am looking for an example showing the usage of autocomplete feature of TextField. I want to use autocomplete feature to suggest different countries.

I am referring the Combox examples at http://extjs.com/deploy/dev/examples/samples.html

Or can any one provide me link or starting point

[Condor]

TextField doesn't have autocomplete support. Only ComboBox has, but you can make it look like a textfield by adding hideTrigger:true.

ps. What is wrong with the combobox examples from the SDK? Don't they show you how to use the typeAhead config option?

[jraq]

I have a question similar to nikhilwalker. I have implemented a combobox from the examples however, how would I go about being able to submit the typed it text and not be forced to select the first result. With the example from the SDK you are forced to select one of the items from the drop downs.

My goal is to create search box as found at google. Typing provides hints, but you dont have to actually choose one.

I tried 'forceSelection' but that defaults to false anyway. I'm new to ExtJS but my guess is that the reason i'm having trouble is that the example from the sdk uses the onSelect handler. Any help/suggestions would be greatly appreciated.

I know I'm encouraged to post code but it really is directly from the combobox w/ templates example that searches this forum.

Thanks
-j

[djdykes]

was a solution ever found to this?
Posting the text entered rather then the actual value?

[villemustonen]

I am also trying to implement this sort of TextField looking ComboBox. If the user types "met" and a match for "metallica" is found, and the user presses Enter, the value "met" should be in the field, instead of "Metallica". "Metallica" should only be chosen when the user presses the down-arrow key and implicitly selects it.

I tried overwriting onTypeAhead() in ComboBox but this doesn't help.

[peet]

send the entire contents of the combobox for each keystroke to the server (queryParam i think). On the server, parse out the last word, get suggestions, and send what was typed prepended to each suggestion. So they are not forced to select a suggested phrase, send the typed text as first choice.

[nani123]

hi im facing one problem(http://dev.sencha.com/deploy/ext-4.0...um-search.html) for this example
i created one text fied search for ajax using sencha php file its working fine(http://www.sencha.com/forum/topics-remote.php) .

same file i copied and past it in local and save it as .php in server folder, it does not return the data, can any one plzz help me.. its urgent

[Annu]

Hi,

I already used a combobox and its working fine. But now I want autocomplete functionality with Grid panel. It have filter On columns and i want autocomplete on that filter.
Here is my code: I am using some perl code also.

var filters_config = {
ftype: 'filters',
filterCls: 'filter-sort .x-column-header-text',
onCheckChange: function (item, value) {
this.getMenuFilter().setActive(value);
},

// This function will return filter settings for all columns and build query to set filter setting on respective column.
onBeforeLoad : function (store, options) {
options.params = options.params || {};
this.cleanParams(options.params);
var params = this.buildQuery(this.getFilterData());
Ext.apply(options.params, params);
if(params.filter) {
filterSetting = Ext.decode(params.filter);
} else {
filterSetting = null;
}
},
};

var grid = Ext.create('Ext.grid.Panel', {
title: "<% 'tabdiv_' . $tab_divid_cnt |n%>",
id: "<% $grid_id |js,h%>",
columns: column,
store: grid_store,
columnLines: true,
loadMask: true,
tbar: tbar,
features: [filters_config],
renderTo: Ext.get('<% 'tabdiv_' . $tab_divid_cnt |n%>'),
layout: 'fit',
header: false,
enableColumnMove: false,
% if ( not $fetch_data_from_server) {
autoHeight: true,
viewConfig: {
deferEmptyText: false,
emptyText: "<% defined $no_result_html ? $no_result_html : escape_html($no_result) |n%>",
autoscroll: true,
enableTextSelection: true
},
% } else {
height: Ext.getBody().getViewSize().height - 150,
width: Ext.getBody().getViewSize().width - 240,
% }
listeners: {
afterrender: function(grid) {
if (!columnSetting && <% $fetch_data_from_server || 0 |h%>) {
grid.getStore().guaranteeRange(0, <% $display_size |n%>);
}
else if (filterSetting) {
// This is use to set filter icon when page get reload
grid.filters.createFilters();
}
},
columnhide: function(columns, column, opt) {
if (Ext.getCmp(columns.container.id)) {
var columnStruc = columns.items.items;
if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
columnStruc[0]['filterSetting'] = filterSetting;
}
bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT');
}
},
columnshow: function(columns, column, opt) {
if (Ext.getCmp(columns.container.id)) {
var columnStruc = columns.items.items;
if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
columnStruc[0]['filterSetting'] = filterSetting;
}
bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT')
}
}
}
});


Weather I required to add some parameters in filters_config or any other way to add autocomplete functionality.I want autocomplete means when i type a letter in filter textbox of grid panel, related search list according to that letter is needed to displayed.

thanks!!!