laravel - 提前输入 |输入字段填充 JSON 数据而不是建议答案

【问题标题】：laravel - Typeahead | Input field gets populated with JSON data instead of the suggestionlaravel - 提前输入 |输入字段填充 JSON 数据而不是建议
【发布时间】：2017-09-09 21:46:21
【问题描述】：

我正在尝试在我的 laravel 5.4 项目中实现搜索功能我面临一个问题，建议在下拉列表中显示正常，但是当我选择其中任何一个时，输入字段将填充 json 数据而不是建议字符串。

这里是视图和 jquery：

<div class="input-group input-medium " style="float: right; padding-top: 3px; ">
    <input type="search" name="q" class="form-control search-input" placeholder="search customer" autocomplete="off" >    
</div>

<script>
    jQuery(document).ready(function($) {
        // Set the Options for "Bloodhound" suggestion engine
        var engine = new Bloodhound({
            remote: {
                url: '/find_customer?q=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $(".search-input").typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            source: engine.ttAdapter(),

            // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
            name: 'usersList',

            // the key from the array we want to display (name,id,email,etc...)
            templates: {
                empty: [                      

                    '<a class="list-group-item">Nothing found.</a>'
                ],
                header: [
                    '<div class="input-group input-results-dropdown">'
                ],
                suggestion: function (data) {

                            return '<a class="list-group-item">'  + data.first_name + ' ' +data.last_name + '</a>'



          }
            }
        });
    });
</script>

请帮忙

【问题讨论】：

标签： javascript jquery json typeahead.js laravel-5.4

【解决方案1】：

参考docs

display – 对于给定的建议，确定它的字符串表示形式。这将在选择建议后设置输入控件的值时使用。可以是键字符串或将建议对象转换为字符串的函数。默认将建议字符串化。

$(".search-input").typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        source: engine.ttAdapter(),

        // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
        name: 'usersList',
        display: 'ID' // insert values to show here

        // the key from the array we want to display (name,id,email,etc...)
        templates: {
            empty: [                      

                '<a class="list-group-item">Nothing found.</a>'
            ],
            header: [
                '<div class="input-group input-results-dropdown">'
            ],
            suggestion: function (data) {

                        return '<a class="list-group-item">'  + data.first_name + ' ' +data.last_name + '</a>'



      }
        }
    });

【讨论】：