Bootstrap-3-Typeahead afterSelect 获取 ID答案

【问题标题】：Bootstrap-3-Typeahead afterSelect Get IDBootstrap-3-Typeahead afterSelect 获取 ID
【发布时间】：2016-02-15 06:04:55
【问题描述】：

我正在使用 Bootstrap-3-Typeahead here 从 mysql 自动完成。我需要从选定的 item_name afterSelect 中获取 item_code，例如

$('#item_code').val(this.item_code);

不幸的是没有工作。

我的 Json 输出：

[{"item_code":"1","item_name":"A"},{"item_code":"2","item_name":"B"}]

这是我的代码，请指教

$('input.item_name').typeahead({
                minLength: 3,
                source: function (query, process) {
                    $.ajax({
                        url: 'function/load-item.php',
                        type: 'POST',
                        dataType: 'JSON',
                        data: 'query=' + query,
                        success: function(data) {
                            var newData = [];
                            $.each(data, function(){
                                newData.push(this.item_name);
                                });
                            return process(newData);
                            }
                    });
                },
                afterSelect: function(){
                    $('#item_code').val( ... ... ... ... );
                }
            });

我的php代码

<?php
session_start();
include ('../include/connect.php');

$query = 'SELECT item_code,item_name FROM master_item';
if(isset($_POST['query'])){
$query .= ' WHERE item_name LIKE "%'.$_POST['query'].'%"';
}

$return = array();
if($result = $conn->query($query)){
    // fetch array
    while ($row=mysqli_fetch_assoc($result))
    {
        $return[] = $row;
    }

    // free result set
    $result->close();
    // close connection
    $conn->close();

    $json = json_encode($return);
    print_r($json);
}

【问题讨论】：

标签： twitter-bootstrap bootstrap-typeahead

【解决方案1】：

这是为了那些在不久的将来可能会遇到同样问题的人。 以下是使用 JQuery 和 bootstrap-3-typeahead.js or bootstrap-3-typeahead.min.js 获得相同功能的另一种简单方法：

示例

var url = "codePath/searchCode.php";
$('.typeahead').typeahead({
    source: function (query, process) {
      return $.get(url, { query: query }, function (data) {
        console.log(data)
	    return process(data);
	  });
    },
    //this triggers after a value has been selected on the control
    afterSelect: function (data) {
      //print the id to developer tool's console
      console.log(data.id);
    }
});

【讨论】：

找到了很多 .on('typeahead:selected' .... 答案，但在此之前没有任何效果。谢谢 Deen_Kadir
@deen_kadir 你是真正的冠军。非常感谢

【解决方案2】：

尝试使用 typeahead:selected 而不是 afterSelect 它返回整个对象，您可以在其中获取所需的值，即 .item_code 。我已经创建了这个 fiddle ，你可以在那里看到工作示例。

$('.typeahead').on('typeahead:selected', function (e, datum) {
    console.log(datum);
    $('#item_code').val(datum.item_code);
});

【讨论】：

感谢朋友的回复。它与您的示例完美配合。但我需要使用来自 php 的远程数据。你能帮助我吗？我正在尝试修改此示例link，但没有运气。请指教，谢谢
我已经更新了你提供的小提琴，它在这里工作。 jsfiddle.net/UkB7u/1339
嘿伙计，我又需要你的帮助了。复制您的代码并将网址更改为上面的网址后，预输入始终显示 5 第一行，并且过滤器不起作用。请再次帮忙，谢谢
你能提供我的代码吗？我的意思是那个不工作的。
我将 url 更改为我的 url：function/load-item.php。正如我上面关于我的问题所写的那样。

【解决方案3】：

回复旧线程，您的代码似乎不错，您只是错过了 afterSelect 回调的参数

$('input.item_name').typeahead({
            minLength: 3,
            source: function (query, process) {
                $.ajax({
                    url: 'function/load-item.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: 'query=' + query,
                    success: function(data) {
                        var newData = [];
                        $.each(data, function(){
                            newData.push(this.item_name);
                            });
                        return process(newData);
                        }
                });
            },
            afterSelect: function(args){
                $('#item_code').val(args.item_code );
            }
        });

【讨论】：