twitter-bootstrap Bootstrap-3-Typeahead afterSelect Get ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35402487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap-3-Typeahead afterSelect Get ID
提问by vincmeister
I'm using Bootstrap-3-Typeahead herefor my autocomplete from mysql. I need to get item_code from selected item_name afterSelect with something like
我在这里使用 Bootstrap-3-Typeahead来从 mysql 自动完成。我需要从选定的 item_name afterSelect 中获取 item_code 类似的东西
$('#item_code').val(this.item_code);
unfortunately not working.
不幸的是不工作。
My Json output:
我的 Json 输出：
[{"item_code":"1","item_name":"A"},{"item_code":"2","item_name":"B"}]
[{"item_code":"1","item_name":"A"},{"item_code":"2","item_name":"B"}]
here's my code, please advise
这是我的代码，请指教
$('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( ... ... ... ... );
}
});
My php code
我的 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);
}
?>
?>
采纳答案by geekowls
Try Using typeahead:selectedinstead of afterSelectit returns the whole object where you can get your required value i.e. .item_code. I have created this fiddle, you can see the working example there.
尝试使用typeahead:selected而不是afterSelect它返回整个对象，您可以在其中获得所需的值，即 .item_code. 我已经创建了这个小提琴，你可以在那里看到工作示例。
$('.typeahead').on('typeahead:selected', function (e, datum) {
console.log(datum);
$('#item_code').val(datum.item_code);
});
回答by Deen_Kadir
This is for the benefit of those who might have the same problem in the near future. Below is another simple approach to getting the same functionalityusing JQuery and bootstrap-3-typeahead.js or bootstrap-3-typeahead.min.js:
这是为了那些在不久的将来可能遇到同样问题的人的利益。 下面是使用 JQuery 和bootstrap-3-typeahead.js 或 bootstrap-3-typeahead.min.js获得相同功能的另一种简单方法：
Example
例子
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);
}
});回答by Karsankaka
replying on old thread, your code seems to be good, you just missed the argument to the afterSelect callback
在旧线程上回复，您的代码似乎不错，您只是错过了 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 );
}
});
