Twitter typeahead is not working on ASP.NET

Question

1.00/5 (1 vote)

See more:

Hi, could someone assist me on how could I implement the typeahead properly. The following code is not working on my part.

Your help is greatly appreciated. Thank you.

What I have tried:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SearchMe.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Typeahead V.1</title>
    <script src="Scripts/jquery-3.2.1.js"></script>
    <script src="Scripts/typeahead.bundle.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
   

       
    <script type="text/javascript">
        
        $(document).ready(function () {
            debugger;
            var searchlist = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('keyword'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                limit: 10,
                remote: { url: 'http://10.17.35.35:8380/typeahead-ws/search.json?q=%QUERY&store=macmall' }

            });

            // kicks off the loading/processing of `local` and `prefetch`
            searchlist.initialize();
            // debugger;

            // passing in `null` for the `options` arguments will result in the default
            // options being used
            $('#search-box').typeahead({
                hint: true,
                highlight: true,
                minlength: 3
                }, {
                name: 'keyword',
                displayKey: 'keyword',
                // `ttAdapter` wraps the suggestion engine in an adapter that
                // is compatible with the typeahead jQuery plugin
                source: searchlist.ttAdapter()
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input class="typeahead" type="text" id="search-box"/>
        </div>
    </form>
</body>
</html>

Posted 19-Jun-17 19:14pm

Silver Lightning

Updated 22-Jun-17 18:07pm

Add a Solution

Comments

Richard Deeming 22-Jun-17 17:12pm

If you want someone to help you, you need to tell us what the problem is.

And don't keep reposing the question. If you want to update it to add more information, just click the green "Improve question" link to edit the existing question.

Silver Lightning 23-Jun-17 0:05am

Hi Richard, sorry it's my fault.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Silver Lightning · Accepted Answer · 2017-06-22T18:07:00

Here's the solution to this issue:

$(function () {
    var searchlist = new Bloodhound({
        datumTokenizer: function (searchlist) {
            return Bloodhound.tokenizers.whitespace(searchlist.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: urlAPI,
            wildcard: '%QUERY',
            filter: function (response) { return response.suggestions; }
        }
    });

    // Initialize the searchlist
    searchlist.initialize();

    $('#searchBox').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
    },
        {
            name: 'searchlist',
            displayKey: function (suggestions) { return suggestions.keyword },
            source: searchlist.ttAdapter(),
            limit: 10
        });
});