javascript - 在 Laravel 中使用 id 和标签提前输入

Question

我有一个表单，并且在客户字段中使用预先输入，这可以很好地显示客户名称，但我需要将客户 ID 保存到数据库中，而不是名称。

这是我目前正在尝试的:

app.blade.php

    <script>
    $('#clientsearch').typeahead({
    source: function (query, process) {
        clients = [];
        map = {};
        var data = [{"clientID": "1", "clientName": "client 1"},
        {"clientID": "2", "clientName": "client 2"},
        {"clientID": "3", "clientName": "client 4"},
        {"clientID": "4", "clientName": "client 10"},
        {"clientID": "5", "clientName": "client 3"}
        ];
        $.each(data, function (i, client) {
            map[client.clientName] = client;
            clients.push(client.clientName);
        });
        process(clients);
    },
    matcher: function (item) {
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    sorter: function (items) {
        return items.sort();
    },
    highlighter: function (item) {
        var regex = new RegExp('(' + this.query + ')', 'gi');
        return item.replace(regex, "<strong>$1</strong>");
    },
    updater: function (item) {
        $('#clientID').val(clients[item].clientID);
        return item;
    }
});
</script>

表格

<div class="form-group">
    {!! Form::label('client', 'Client:') !!}
    {!! Form::text('client', '', ['class' => 'form-control', 'id'=>'clientsearch', 'autocomplete'=>'off']) !!}
</div>

<input id="clientID" name="clientID" hidden/>

typeahead 未初始化，我收到的错误是:

“未捕获的类型错误:$(...).typeahead 不是函数”

Answer 1

谢谢大家，我现在设法让它工作了，以防万一其他人需要类似的东西，这里是代码

$('#client').typeahead({
    source: function (query, process) {
        client = [];
        clientid = {};
        var data = [{"clientID": "1", "clientName": "client 1"},
            {"clientID": "2", "clientName": "client 2"},
            {"clientID": "3", "clientName": "client 4"},
            {"clientID": "4", "clientName": "client 10"},
            {"clientID": "5", "clientName": "client 3"}
        ];
        $.each(data, function (i, state) {
            clientid[state.clientName] = state;
            client.push(state.clientName);
        });
        process(client);
    },
    matcher: function (item) {
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    sorter: function (items) {
        return items.sort();
    },
    highlighter: function (item) {
        var regex = new RegExp('(' + this.query + ')', 'gi');
        return item.replace(regex, "<strong>$1</strong>");
    },
    updater: function (item) {
        $('#clientID').val(clientid[item].clientID);
        return item;
    }
});