Search Texbox : input with type search is possible in Kendo Mobile?

[Joon]

Hi,
I want to have a input text box with search enabled just like the type='search' input box available in the jquerymobile.
i.e. No need to have the search button next to it, but it turns the iPhone return button into the search button.

http://jquerymobile.com/demos/1.1.0/docs/forms/search/index.html 

Would it be possible to do this in Kendo Mobile view?

alternatively, I wouldn't mind using the jquerymobile directly in my Kendo Mobile view if possible(I tried this ,, <input type='search' /> and didn't work. 

Any help would be much appreciated,

Regards,

JOhn C

[Petyo]

Hi,

You need to wrap the search in a form element for the keyboard to change. 

Kind regards,
Petyo
the Telerik team

[Manuel Ortiz]

Hello, I am interested in how you did this.. can you provide a code sample?

Thanks,
Manuel

[Joon]

        <form action="javascript:SearchPage();">
            <input id="input_search_word" type="search" style="width:94%; height: 45px; margin: 8px 3% 8px 3%; padding-left:10px; padding-right:10px;"
                placeholder="@pagename or search keyword" autocapitalize="off" autocorrect="off" />
        </form>

Here goes my sample, just wrap the input tag around with the form tag. Note that the form has the action attribute, that gets triggered when you press "enter/search" on the mobile keyboard.

For live sample, browse to http://bookingbay.net on your mobile browser.

Cheers,

JC

[Manuel Ortiz]

It worked perfectly!! Would it be too much if you can provide me with an example of the code inside SearchPage()?  Do you use it to filter the listview or just to search everywhere?

Thanks a lot,
Manuel

[Joon]

No worries, I don't mind sharing it.
Still I've got other backend stuff, so the code itself won't work but it will give you an idea.

I basically do a jquery and get the json object and bind it to the kendoMobileListView.

in a nutshell, the search happens in my MVC.net backend (a database query) and it returns the json object. I don't do anything on the client side, I just bind it to the list.

Actually, on the my events tab of my application(http://bookingbay.net) I've stored the initially queried json object into memory and then filtered it to bind to the list view when the date(there's a calendar object) changes. This way, I don't have query the database again. I've done this because that fits my particular scenario but it may not fit your situation. Technically it's possible to filter the json object and re-bind.

Hope it helped.

        function GetPageBySearch(keyword) {
            var app = BBApp;
            $.when(app.getPageBySearch(keyword)).then(function (data) {
                $("#lviewSearchResults").kendoMobileListView({
                    dataSource: data,
                    template: $("#lviewSearchResults-template-for-page").text()
                });
            });
        };