[英]Typeahead and AJAX query doesn't work
I'm trying to get TB Typeahead working with AJAX results and PHP but can't. 我试图让TB Typeahead处理AJAX结果和PHP,但不能。 See this is the code I made for this:
看到这是我为此编写的代码:
$('#search').typeahead({
limit: 10,
minLength: 2,
source: function() {
return $.ajax({
url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
type: "GET",
data: "search=" + $("#search").val(),
success: function(result) {
return result;
}
});
}
});
The result for calling for example with "co" is: 例如,使用“ co”进行调用的结果是:
["Combo AMD A4 (14,708.06 BsF)","Combo AMD A8 (17,900.05 BsF)","Combo
Core i3 (17,200.01 BsF)","Combo Core i5 (20,399.95 BsF)","Combo Intel
G465 (13,699.99 BsF)","Combo Intel G630 (15,199.97 BsF)"]
But options aren't showed, why? 但是没有显示选项,为什么呢? What is wrong?
怎么了? Also it's possible to add some way to click in options and go to a specific URL?
还可以添加一些方法来单击选项并转到特定的URL?
I also check this post and this other too and finally this other but without results 我也检查了这个帖子和另一个 ,最后另一个,但没有结果
EDIT Thanks to the amazing help from @dikirill I get this code working partially: 编辑感谢@dikirill的惊人帮助,我使此代码部分起作用:
$('#search').typeahead({
limit: 10,
minLength: 2,
source: function(query, process) {
$.ajax({
url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
type: "GET",
data: "search=" + $("#search").val(),
success: function(result) {
return process(result.names);
},
dataType: 'json'
});
},
updater: function(item) {
var values = $('#search').data('values');
alert(values);
for (var index in values) {
if (values[index].name == item) {
location.href = values[index].href;
break;
}
}
return item;
}
});
What isn't working? 什么不起作用? Well I want when I click any element from typeahead result instantaneously I got redirected to the URL associated to that element.
好吧,我想当我从预先输入的结果中单击任何元素时,立即将我重定向到与该元素关联的URL。 See this PHP function is the function that returns values:
看到这个PHP函数是返回值的函数:
public function AjaxProductSearch() {
$this->load->model('catalog/product');
if (isset($this->request->get['search'])) {
$search = $this->request->get['search'];
} else {
$search = '';
}
$output = array();
if (isset($this->request->get['search'])) {
$data = array(
'filter_name' => $search
);
$product_total = $this->model_catalog_product->getTotalProducts($data);
$results = $this->model_catalog_product->getProducts($data);
$output = array();
foreach ($results as $result) {
$output['names'][] = $result['name'];
$output['values'][] = array(
'name' => $result['name'],
'href' => $this->url->link('product/product', 'product_id=' . $result['product_id'] . $url)
);
}
}
echo json_encode($output);
}
Then one result returned is for example this one: 然后返回的结果是例如以下结果:
{"names":["Combo AMD A4","Combo AMD A8","Combo Core i3","Combo Core i5","Combo Intel G465","Combo Intel G630"],"values":[{"name":"Combo AMD A4","href":"http:\/\/store.devserver\/amd-a4"},{"name":"Combo AMD A8","href":"http:\/\/store.devserver\/amd-a8"},{"name":"Combo Core i3","href":"http:\/\/store.devserver\/intel-corei3"},{"name":"Combo Core i5","href":"http:\/\/store.devserver\/intel-corei5"},{"name":"Combo Intel G465","href":"http:\/\/store.devserver\/intel-g465"},{"name":"Combo Intel G630","href":"http:\/\/store.devserver\/intel-g630"}]}
As you can see I've names which allow me to build the typeahead as must be and the other values is where I get names associated to href. 如您所见,我拥有一些名称 ,这些名称使我能够按需构建快捷输入法,而其他值是我获得与href相关联的名称的地方。 In others words if I pick
Combo AMD A4
then I should redirect to href":"http:\\/\\/store.devserver\\/amd-a4
and my code isn't working, what is wrong? 换句话说,如果我选择
Combo AMD A4
那么我应该重定向到href":"http:\\/\\/store.devserver\\/amd-a4
并且我的代码无法正常工作,这是怎么回事?
Try my example: 试试我的例子:
$('#search').typeahead({
limit: 10,
minLength: 2,
source:function (query, process)
$.ajax({
url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
type: "GET",
data: "search=" + $("#search").val(),
success: function(result) {
if (typeof result.values != "undefined") {
$('#search').data('values', result.values);
return process(result.names);
}
},
dataType: 'json'
});
},
updater: function(item) {
var values = $('#search').data('values');
for (var index in values) {
if (values[index].name == item) {
location.href = values[index].href;
break;
}
}
return item;
}
});
Ended up with missing 'dataType'. 最终缺少“ dataType”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.