[CLOSED] autocomplete Ã¤ la "Custom search example"

**mirwais** · Apr 18, 2012, 12:03 PM

Hi

i am trying to achieve the autocomplete functionality with the custom search example. But instead of using the Httphandler I am using a web service (.asmx) method.

I changed the example in this way:

  <div style="width:600px;">
            <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Search the plants</h3>
                
            <ext:ComboBox 
                runat="server" 
                DisplayField="Common" 
                ValueField="Common"
                
                TypeAhead="false"
                LoadingText="Searching..." 
                Width="570"
                PageSize="10"
                HideTrigger="true"
                ItemSelector="div.search-item"        
                MinChars="1">
                <Store>
                    <ext:Store runat="server" AutoLoad="false">
                        <Proxy>
                            <ext:HttpProxy Method="Post"  Url="WebServiceTest.asmx/Data" />
                        </Proxy>
                        <Reader>                           
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="Common"/>
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <Template runat="server">
                   <Html>
                       <tpl for=".">
                          <div class="search-item">
                             <h3>{Common}</h3>
                          </div>
                       </tpl>
                   </Html>
                </Template>
            </ext:ComboBox>    
            
            <div style="padding-top:4px;">
                Plants search (type '*' (asterisk) for showing all)
            </div>
            </div></div></div>
            <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
        </div>

And the web service looks like this:

[WebMethod]
        public string[] Data(string query)
        {
            var strArr = new string[] { "one", "two", "three" };

            return strArr.Select(x => query + " " + x).ToArray();
        }

Everything looks fine the web service is called and the string array is returned see the response. But there is a request failure by Ext.net. Can someone please help?
response (fiddler raw):

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <string>b one</string>
  <string>b two</string>
  <string>b three</string>
</ArrayOfString>

**Daniil** · Apr 18, 2012, 1:01 PM

Hi,

For XML WebService you should use XmlReader.
https://examples1.ext.net/#/GridPane...ML_WebService/

If you need ArrayReader or JsonReader you should use JSON WebService.
https://examples1.ext.net/#/GridPane...ON_WebService/

To get your example working I would change the following things.

1. Set up

Json="true"

for the HttpProxy.

2. Mark the WebService with the

[System.Web.Script.Services.ScriptService]

attribute.

3. Set up the following things for the ArrayReader.

<ext:ArrayReader Root="data" TotalProperty="total">

4. Use the following WebMethod.

[WebMethod]
public object Data(string query)
{
    var strArr = new string[] { "one", "two", "three" };

    return new {
        data = JSON.Serialize(strArr.Select(x => query + " " + x).ToArray()),
        total = strArr.Length
    };
}

**mirwais** · Apr 18, 2012, 2:50 PM

thank you Daniil for the response, but it does not work properly:

I have a Rquest failure popup :

Click image for larger version.

Name: capture001.png
Views: 85
Size: 10.5 KB
ID: 4128

Putting

 Root="d.data" instead of root="data"

I have this:

Click image for larger version.

Name: capture002.png
Views: 93
Size: 16.0 KB
ID: 4129

Serialization is somehow not done correctly, I suppose, or it does not work with an ArrayReader?

Is this the only way to achieve the autocompletion functionality? similar to ajaxToolkit:AutoCompleteExtender?

and btw where can I find some documentation for Template usage? here for instance

 <tpl for=".">

**Daniil** · Apr 18, 2012, 4:27 PM

You are correct that you set up

Root="d.data"

and

TotalProperty="d.total"

A few more changes are required.

1. Remove

JSON.Serialize(...)

2. ArrayReader expects an array/list of arrays (JsonReader expects an array/list of objects).

So, the following works.

Example

[WebMethod]
public object GetData()
{
    return new
    {
        data = new object[] 
        {
            new string[] { "one" },    
            new string[] { "two" },
            new string[] { "three" }
        },
        total = 3
    };
}

Originally Posted by mirwais

Is this the only way to achieve the autocompletion functionality? similar to ajaxToolkit:AutoCompleteExtender?

Generally, yes.

Originally Posted by mirwais

and btw where can I find some documentation for Template usage? here for instance

 <tpl for=".">

Please investigate:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Template-method-constructor
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.XTemplate-method-constructor
https://examples1.ext.net/#/Miscella...late/Overview/

**mirwais** · Apr 19, 2012, 8:12 AM

Thank you very much Daniil for the clarifications, this worked perfectly for me. I removed "data" as I am using Arrayreader:

[WebMethod]
public object Data(string query)
{
   var strArr = new string[] { "one", "two", "three" };
  var arr = strArr.Select(x => new string[] { query + " " + x }).ToArray();			
  return  arr;
}

And Root="d" instead of d.data in this case.

cheers,

Mirwais

Thread: [CLOSED] autocomplete Ã¤ la "Custom search example"

Thread Tools

Search Thread

Display

[CLOSED] autocomplete ä la "Custom search example"

[CLOSED]

Similar Threads

[CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control

[CLOSED] TabPanel "TabCloseMenu" plug-in "CloseOtherTabsText" property not working

[CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"

[CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"

[CLOSED] Problem with the ItemSelector="div.search-item" in a ComboBox

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources