jQuery Autocomplete/Twitter Typeahead填充多个字段

本文介绍了jQuery Autocomplete/Twitter Typeahead填充多个字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前正在使用TypeAhead(引导程序)，但很高兴使用jQuery自动完成功能来完成我需要的

I'm currently using TypeAhead (Bootstrap) but happy to use jQuery Autocomplete to accomplish what I need

我有5个输入字段.我还有一个结构如下的表，因此我将使用远程数据源:

I have 5 input fields. I also have a table structured as below so I'll be using a remote datasource:

Classification | Model | Cost | Depreciation | Warranty ----------------------------------------------------------- Laptop/PC/Server | X/Y/Z | 1/2/3 | 1/2/3/4/5/6/7 | 1/2/3

因此，每一列都有多个值.一台笔记本电脑只能归因于某些型号

So there are multiple values for each column. A laptop can only have certain models attributed to it

问题一

比方说，我为自动完成字段选择了笔记本电脑"，是否有必要对型号"字段进行优化以仅选择那些归因于所选笔记本电脑的型号?

Let's say I choose "Laptop" for an autocomplete field, is there anyway to refine the "Model" field to pick out only those models attributed with the chosen laptop?

第二个问题

首先，让我们假设以上是不可能的.假设我从自动填充字段中为分类"选择了笔记本电脑".然后，我转到模型"自动完成字段，然后选择"Latitude D830".无论如何，然后我可以自动填充成本/折旧/保修"字段吗?

In the first instance, let's presume the above isn't possible. Let's say I chose "Laptop" from the autocomplete field for "Classification". I then go to the "Model" autocomplete field and choose for example "Latitude D830". Is there anyway I can then populate the Cost/Depreciation/Warranty field automatically?

现在让我们说第一个问题是可能的.结合两者的最佳方法是什么?当前的TypeAhead初始化非常简单

Let's now say the first question is possible. What's the best way to combine the two? The current TypeAhead initialisation is pretty vanilla

$('#inputClassification').typeahead([ { name: 'classification', local: ["Tablet", "PC", "Laptop", "Phone", "Printer", "Switch", "Router", "Firewall", "Wireless AP", "Wireless Controller", "Server", "Storage"] } ]);

谢谢！

推荐答案

似乎类似的方法似乎可行

Seems something along these lines seems to work

$('#inputLocationStatus').typeahead({ name: 'poiuy', prefetch: 'js/names.json', ttl:0 }).on('typeahead:selected', onSelected); function onSelected($e, datum) { $('#inputDepartment').val(datum['description']); }