如何通過API呼叫使用預先輸入？

這里我想創建一個文本框，它可以在輸入 3 個字母后顯示匹配的客戶串列。我使用了帶有遠程插件的twitter typeahead 。每當我輸入 3 個字母時，它就開始顯示一個空白框，但它不包含任何型別的串列。我想念什么嗎？請幫幫我！！我的標記和 jQuery 如下...

<form>
    <div class="form-group">
        <label>Customer</label>
        <input id="customer" type="text" value="" class="typeahead form-control" />
    </div>
    <div class="form-group">
        <label>Movies</label>
        <input type="text" value="" class="form-control" />
    </div>

    <button class="btn btn-primary">Submit</button>
</form>


<script>
        $(document).ready(function () {
            var viewmodel = {};
            var customers = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/api/customers?query=%QUERY',
                    wildcard: '%QUERY'
                }
            });

            $('#customer').typeahead({
                minLength: 3,
                highlight: true
            }, {
                name: 'customers',
                display: 'name',
                source: customers
            }).on("typeahead:select", function (e, customer) {
                viewmodel.customerId = customer.id;
            });
        });
</script>

uj5u.com熱心網友回復：

Twitter typeahead 已經超過五年沒有更新了，它被新的 Bootstrap (4/5) 和 JQuery 庫破壞了。我建議您使用JQuery Typeahead，它更新且功能齊全。這是一個作業示例：

$.typeahead({
    input: '.js-typeahead-country_v1',
    order: "desc",
    source: {
        data: [
            "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
            "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
            "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
            "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
            "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
            "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
            "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti",
            "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador",
            "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon",
            "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea",
            "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India",
            "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan",
            "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos",
            "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg",
            "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands",
            "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco",
            "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger",
            "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru",
            "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino",
            "Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone",
            "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain",
            "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan",
            "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey",
            "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
            "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
        ]
    },
    callback: {
        onInit: function (node) {
            console.log('Typeahead Initiated on '   node.selector);
        }
    }
});

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css">

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>

</head>
<body>

<form id="form-country_v1" name="form-country_v1">
    <div class="typeahead__container">
        <div class="typeahead__field">
            <div class="typeahead__query">
                <input class="js-typeahead-country_v1" name="country_v1[query]" placeholder="Search" autocomplete="off">
            </div>
            <div class="typeahead__button">
                <button type="submit">
                    <i class="typeahead__search-icon"></i>
                </button>
            </div>
        </div>
    </div>
</form>

當然，您可以使用插件中的 source 選項從 Ajax API 呼叫中獲取資料。

標籤：javascript 查询 css 提前输入.js 提前打字

上一篇：在JQuery和vanillaJS之間設定功能時可能發生沖突？

下一篇：如何在Modal中粘貼資料