autocomplete + ajax: How to stop client side filtering

5 posts, 1 answers
  1. Kent
    Kent avatar
    4 posts
    Member since:
    May 2012

    Posted 29 Jan 2013 Link to this post

    I have a web api for address loopup. User can type some keywords and system will search both Location Description and Address.

    I managed to write the following code to make it work, well, basically.

    So, whenever user types anything, application will go to server to get back results properly.
    However, since I need to specify dataTextField as LocationDescription, autocomplete will always filter out results if keyword is in Address field.

    Default value of filter is startsWith, I've changed it to "contains" in my code.

    My question is, is there any way I can just disable client side filtering based on dataTextField?

    TIA

    ===============
    <input id="pulocation" />

    <script id="template" type="text/x-kendo-tmpl">
         <b>${ data.LocationDescription }</b><br/>
         ${ data.Address } 
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            var myDs = new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "/api/AddressLookup",
                            data: {
                                criteria: function () {
                                    return $("#pulocation").val();
                                }
                            },
                            success: function (result) {
                                options.success(result);
                            },
                            dataType: "json",
                            beforeSend: function (xhr) {
       // set auth info
                            }
                        });
                    }
                }
            });

            $("#pulocation").kendoAutoComplete({
                minLength: 1,
                dataTextField: "LocationDescription",
                template: kendo.template($("#template").html()),
                filter: "contains", // <--
                dataSource: myDs
            });

            $("#pulocation").data("kendoAutoComplete").list.width(400);

            $("#pulocation").keydown(function (e) {
                    myDs.read();    
            });
        });
    </script>

  2. Kent
    Kent avatar
    4 posts
    Member since:
    May 2012

    Posted 29 Jan 2013 Link to this post

    I just found another user asked the same question. 
    http://www.kendoui.com/forums/ui/autocomplete/filtering-on-more-than-one-data-field.aspx

    He switched to jquery UI autocomplete though.

    I actually tried jquery UI autocomplete first, but I want to use kendo web UI for consistency (we are paid customer). 

    Is there any solution or workaround?

    Thanks~

  3. Kendo UI is VS 2017 Ready
  4. Kent
    Kent avatar
    4 posts
    Member since:
    May 2012

    Posted 29 Jan 2013 Link to this post

    Currently I'm 'overriding' kendo.data.DataSource.filter method, but I think it's like hack lol...
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 30 Jan 2013 Link to this post

    Hello Kent,

     
    I will suggest you enable serverFiltering option. Thus widget will show the data as it is returned from the server.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Kent
    Kent avatar
    4 posts
    Member since:
    May 2012

    Posted 30 Jan 2013 Link to this post

    Thanks Georgi, that works!
Back to Top
Kendo UI is VS 2017 Ready