Click here to Skip to main content
15,943,406 members
Please Sign up or sign in to vote.
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
Updated 22-Jun-17 18:07pm
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

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
        });
});
 
Share this answer
 

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900