Silver Lightning Ответов: 1

Twitter typeahead не работает ASP.NET

Привет, не мог бы кто-нибудь помочь мне в том, как я могу правильно реализовать typeahead? Следующий код не работает с моей стороны.

Мы очень ценим вашу помощь. Спасибо.

Что я уже пробовал:

<%@ 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>

Richard Deeming

Если вы хотите, чтобы кто-то помог вам, вы должны сказать нам, в чем проблема.

И не держите, покоившегося на вопрос. Если вы хотите обновить его, чтобы добавить дополнительную информацию, просто Нажмите зеленую ссылку "улучшить вопрос", чтобы отредактировать существующий вопрос.

Silver Lightning

Привет, Ричард, извини, что это моя вина.

1 Ответов

Рейтинг:
11

Silver Lightning

Вот решение этой проблемы:

$(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
        });
});