PDA

View Full Version : Autocomplete Text Box like google



rohangpatil
6 Jul 2010, 1:23 AM
Hi, can we have a auto complete text-box like Google search text box??

Right now I have just implemented the auto-complete combo-box with hide trigger and local array.

Now on every key press there will be a ajax request to a server , which returns a json, using this JSON i want to show the options.

Is this possible ?

chrizmaster
6 Jul 2010, 1:28 AM
öhm...
have you looked to the examples?
There's one which does exactly fit your needs..

http://www.sencha.com/deploy/dev/examples/form/forum-search.html

Animal
6 Jul 2010, 1:35 AM
That example has been temporarily disabled.

But for the OP: JUst configure a ComboBox with



mode: 'remote',
hideTrigger: 'true'


And it will query the server during typing (as soon as you leave the keys for 250ms, it sends the query), and show suggestions.

rohangpatil
6 Jul 2010, 1:36 AM
It doesn't seem to work!

The url is not right!

rohangpatil
6 Jul 2010, 2:24 AM
Hi Animal :)

The text in the combo-box should be sent as a parameter , How should i mention it in the baseParams ??

chrizmaster
6 Jul 2010, 2:40 AM
have you looked at the code of the example above? Even if the url is wrong, it works in exactly that way..

Animal
6 Jul 2010, 3:19 AM
It sends the text automatically.

You can change the name of the HTTP parameter it send it in if you really need to.

http://www.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox&member=queryParam

rohangpatil
6 Jul 2010, 3:37 AM
It sends the text automatically.

You can change the name of the HTTP parameter it send it in if you really need to.

http://www.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox&member=queryParam

Yes this is what i needed!

rohangpatil
6 Jul 2010, 4:36 AM
The parameter which should be sent to server is text.prefix

in the store i mention


baseParams:{
terms.prefix='prefix'
}

in the combo-box i specify


queryParam:'prefix'

its not working!

Condor
6 Jul 2010, 4:40 AM
Shouldn't that be:

baseParams:{
'terms.prefix': 'prefix'
}
and:

queryParam: 'text.prefix'

arunkumargm1987
6 Jul 2010, 5:29 AM
var autocomplete = new Ext.data.Store(
{
proxy :new Ext.data.ScriptTagProxy(
{
url :'http://10.226.190.149:8983/solr/terms?terms.fl=text&indent=true&wt=json&omitHeader=true',
callbackParam :'json.wrf',
method :'GET',
baseParams : {
'terms.prefix' :'prefix'
}
}),
reader :new Ext.data.JsonReader( {
root : function(d) {
return d['terms']['text']['1'];
},
fields : [ {
name :'autocom',
convert : function(v, n) {
return n;
}
} ]

})
});
autocomplete.load(jsonData);



and combo box code is


items : [

new Ext.form.ComboBox(
{
tpl :'<tpl for="."><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom}</div></tpl>',
store :autocomplete,
displayField :'autocom',
typeAhead :true,
autoSelect :false,
mode :'remote',
id :'txtSearch',
triggerAction :'all',
enableKeyEvents :false,
emptyText :'Select a folder...',
editable :true,
queryParam :'text.prefix',
selectOnFocus :true,
hideTrigger :true,
fieldLabel :'Search',
autoHeight :true,
width :'100%',
id :'txtSearch',
allowBlank :false,
anchor :'90%'

}) ]
}




and my response is


{
"terms":[
"text",[
"a",79,
"afe",52,
"announc",49,
"ann",39,
"adacct",31,
"amp",26,
"all",22,
"access",18,
"acquisit",15,8-|:-?
"alt",15]]}

arunkumargm1987
6 Jul 2010, 5:30 AM
please help me where i m gone wrong!!

Animal
6 Jul 2010, 5:35 AM
http://json.org/

http://www.w3schools.com/js/default.asp

arunkumargm1987
6 Jul 2010, 5:44 AM
i didn't anything in that!!

arunkumargm1987
6 Jul 2010, 5:51 AM
animal can u please help me where i m wrong??

Animal
6 Jul 2010, 6:25 AM
Start with smaller steps.

Learn how to load a Store.

Just make a little test page which loads a Store from your "JSON" service. (It's not valid JSON if you read it or paste it into Firebug), so maybe step back even further and learn what JSON is.

Condor
6 Jul 2010, 6:28 AM
1. ScriptTagProxy doesn't have a baseParams config option. Store has a baseParams option and ScriptTagProxy has an extraParams option.

2. The JSON data is invalid. And even if you make it valid, it still wouldn't match the JsonReader config.