Combo with Templates and Ajax .. How does it work ?

[Oxii]

Hi
I would like to build a search function which needs an auto-complete feature.
I would try this : http://dev.sencha.com/deploy/ext-4.1...um-search.html

But I am still not getting how it works exactly.
Where is the variable that should be containing the first 4 letters to send them to php script ?
Also could anyone explain this part of code ?

  // Custom rendering template for each itemgetInnerTpl: 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>';                }

[Tim Toady]

The combo takes care of the querying automatically. There is a property on it called minChars that defaults to 4. If you wanted to change the chars it queries at you would set that property. The combo reads that property and tells the store to do a request with the typed text. That specific example uses a jsonp proxy, so you would need to look in the Net tab in firebug to see it. This is all done behind the scenes, you don't have to do it yourself.

The code you listed is just a template. The records in the store will have fields defined such as topicId, Id, lastPost, author, and excerpt. The item template just wraps those in html for every record.

[Oxii]

The combo takes care of the querying automatically. There is a property on it called minChars that defaults to 4. If you wanted to change the chars it queries at you would set that property. The combo reads that property and tells the store to do a request with the typed text. That specific example uses a jsonp proxy, so you would need to look in the Net tab in firebug to see it. This is all done behind the scenes, you don't have to do it yourself.

The code you listed is just a template. The records in the store will have fields defined such as topicId, Id, lastPost, author, and excerpt. The item template just wraps those in html for every record.

Thanks a lot
I have one more question
Is there a way to display images with search results ?

[Tim Toady]

Yes, templates read arbitrary html. You could easily put an image in and even base that image on a value found in the record as is done with the other fields.

[Oxii]

Yes, templates read arbitrary html. You could easily put an image in and even base that image on a value found in the record as is done with the other fields.

OK.. I followed the example. in my case I would like to retrieve the names after entering 4 letters. e.g: alic
It worked except that it returns all the names not just what contains alic ,
also, I got the result in firebug but not appears in combo box as a list
I am sure my problem is simple but still can't figure out how to fix it.

View:

       items: [{

            xtype: 'combo', 
           store: ds,
            typeAhead: false,
            hideLabel: true, 
           hideTrigger:true, 
           anchor: '100%',
            listConfig: {  
              loadingText: 'Searching...',
               emptyText: 'No matching posts found.',

                getInnerTpl: function() {
                    return '<a {name}'+
                    '</a>';
                }
            }

store and model:

 Ext.define("Post", {
        extend: 'Ext.data.Model',
           proxy: {
         type: 'ajax',
        url: 'autocomplete.php',
        reader: {
            type: 'json',
            root: 'names',
            totalProperty: 'totalCount'
        }
    },


    fields: [
        {
            name: 'name',
        }
    ]
    });


    ds = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'Post'
    });

and the php script:

  $sql= "SELECT name FROM student_name ORDER BY name ASC";



 $result = pg_query($con, $sql);





 while ($row = pg_fetch_array($result))
       {  


                $names[] = array('name' => $row[0]);




       }

       $name_list = array();
$name_list['success']        = true;
$name_list['names']        = $names;


$name_list['totalCount']    = count( $name_list['names'] );


     echo json_encode($name_list); 
     pg_close($con);

Previously I used to use jQuery to do that with this query:
$sql = "SELECT name FROM student_name WHERE name ILIKE '%$search%' ORDER BY name ASC";

but now I have no idea how to send the search term to compare with in database.

[Tim Toady]

So in a combobox there is a property called valueField and one called displayField that you should set.

valueField is the field that is received when doing something like getValue()
displayField is the field that is displayed in the dropdown

As far as returning everything, the combo is sending a parameter to the backend named query. That contains what you typed in the combo. You would then query your database for that text. Generally, if the combo will not contain a large amount of data, I like to set the queryMode to local on the combo and just let Ext handle everything assuming the store is loaded.

[Oxii]

So in a combobox there is a property called valueField and one called displayField that you should set.

valueField is the field that is received when doing something like getValue()
displayField is the field that is displayed in the dropdown

As far as returning everything, the combo is sending a parameter to the backend named query. That contains what you typed in the combo. You would then query your database for that text. Generally, if the combo will not contain a large amount of data, I like to set the queryMode to local on the combo and just let Ext handle everything assuming the store is loaded.

Then in my case I should set valueField and displayField both to 'name' right ?
Also since I will receive a large amount of data then I have to set queryMode: 'remote' and queryParam : 'name' too. right ?

How about my query in php script ? do I have to receive any parameter to compare with in the query ?

[Tim Toady]

Then in my case I should set valueField and displayField both to 'name' right ?

Yes

Also since I will receive a large amount of data then I have to set queryMode: 'remote' and queryParam : 'name' too. right ?

queryMode defaults to remote, so you don't need to do that. queryParam doesn't have to match a field. It is simply the parameter name that gets sent to your server with the text you typed in.

How about my query in php script ? do I have to receive any parameter to compare with in the query ?

Yes the parameter you need to grab to compare comes in as the queryParam value. queryParam defaults to "query". You would use "like" in your sql as you did previously, just with the text the combo sent as the queryParam..

[Oxii]

Thank you
Now if I type anything in the combo, the list showed up but with results not related to what I typed!
I am not sure where is the problem exactly.
Here is my query:
$sql = "SELECT name FROM student_name WHERE name ILIKE '%$query%' ORDER BY name ASC";

[Tim Toady]

I would make sure you are setting $query and that it actually has the data in it you are expecting.