http://demos.kendoui.com/web/autocomplete/template.html

7 posts, 0 answers
  1. Jnchaves
    Jnchaves avatar
    19 posts
    Member since:
    Dec 2008

    Posted 09 Nov 2013 Link to this post

    Hi,
      I see how you are reading the data. How can I use the onclick method to go to another site related to the person I select? I would add the site link in the Json of course.

    Thanks,
    Amin

  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2890 posts

    Posted 11 Nov 2013 Link to this post

    Hi Amin,

    If I understood you would like to open a link in a new tab/window when user selects item from the AutoComplete. If that is the case please check this sample:
    (hint: the autocomplete have two items - Google and Bing)

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jnchaves
    Jnchaves avatar
    19 posts
    Member since:
    Dec 2008

    Posted 11 Nov 2013 Link to this post

    You are awesome.. Exactly what I wanted.
  7. Jnchaves
    Jnchaves avatar
    19 posts
    Member since:
    Dec 2008

    Posted 11 Nov 2013 Link to this post

    Hi,
      I attempted to move the data into JSON file. No Success. Can you help me look at the code below?


    <!DOCTYPE html>
    <html>
    <head>
        <title>KendoUI Test Page</title>
        
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
    </head>
    <body>
       <input id="autocomplete" type="text" />
    <!--    <script>
            $("#autocomplete").kendoAutoComplete({
                dataSource: {
                    data: [
                    {name: "Google", link: "http://www.google.com/"}, 
                    {name: "Bing", link: "http://www.bing.com/"}
                    ]
                },
                dataTextField: "name",
                template: '<span data-href="#:link#">#:name#</span>',
                select: function(e) {
                    var href = e.item.find("span").data("href");
                    window.open(href);
                }
            });
        </script>
    -->
        <script>
            var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
    url: "json.txt",
    dataType: "json",
    data: {
    q: "javascript"
    }
    }
    },
    schema: {
    data: "results"
    }

    });

            $("#autocomplete").kendoAutoComplete({
                dataSource: dataSource,
                dataTextField: "name",
                template: '<span data-href="#:link#">#:name#</span>',
                select: function(e) {
                    var href = e.item.find("span").data("href");
                    window.open(href);
                }
            });

        </script>
    </body>
    </html>



    JSON FILE:

    {
        "results": [
                    {name: "Google", link: "http://www.google.com/"}, 
                    {name: "Bing", link: "http://www.bing.com/"}
                   ]
    }

  8.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2890 posts

    Posted 12 Nov 2013 Link to this post

    Hello Amin,

    The Json which you provided is not valid (you can verify that here).
    Please use a valid one:
    {
        "results": [
            {
                "name": "Google",
                "link": "http://www.google.com/"
            },
            {
                "name": "Bing",
                "link": "http://www.bing.com/"
            }
        ]
    }


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Mithun Prasath
    Mithun Prasath avatar
    5 posts
    Member since:
    Nov 2013

    Posted 25 Nov 2013 Link to this post

    i need a sample for auto complete with jsp, the data for suggestion is from database pls 
  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2890 posts

    Posted 26 Nov 2013 Link to this post

    Hello Mithun,

    Did you checked the JSP version of the AutoComplete demos?


    In addition you can check the AutoComplete JSP Ajax binding help topic:
    If you have any further questions please post them in the JSP section of the forum.
    Thank you in advance for the understanding.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top