简体繁体 English

如何根据数据源有条件地自动完成javascript中的文本字段？

[英]How to autocomplete text field in javascript conditionally based on datasource?

原文 2013-07-16 23:56:37 9 2 javascript/ autocomplete

I want to be able to perform "conditional autocompleting" based on the text that is typed in the query. 我希望能够基于在查询中键入的文本执行“条件自动填充”。 For example: 例如：

A user can: 用户可以：

Type "f", which then pull up suggest names for all field names "field_name", "field_age" as suggestions. 键入“ f”，然后为所有字段名称“ field_name”，“ field_age”提取建议名称作为建议。

If the user then types or selects "field_name" then types "=" in the box, then there would be a request for a specific list of data unique to"field_name" such as [Albert, Bob, Clarisse]. 如果用户然后键入或选择“ field_name”，然后在框中键入“ =”，则将要求“ field_name”具有唯一的特定数据列表，例如[Albert，Bob，Clarisse]。

If the user then types " " (space) then the options would be remotely pulled in or accessed ["AND", "OR", "==", "!=". 如果用户随后键入“”（空格），则将远程拉入或访问选项[“ AND”，“ OR”，“ ==”，“！=”。 Once the user selects or types say "==" then based on the current string so far "field_name == ' ' ", the list [Albert, Bob, Clarisse] would be used. 一旦用户选择或键入“ ==”，然后根据到目前为止的当前字符串“ field_name ==''”，将使用列表[Albert，Bob，Clarisse]。

If the user were to instead type field_age... then a request would go out specficially for a list or json object of ages [7,3,6] that would then pop up. 如果用户改为键入field_age ...，则将专门针对年龄[7,3,6]的列表或json对象发出请求，然后将其弹出。 A sample input in a search box would be: 在搜索框中输入的示例为：

field_name = 'Albert' AND field_age = '7' field_name ='Albert'AND field_age ='7'

I've seen a library typeahead.js, but it appears to just pull in all the data to be autocompleted as opposed to "data as needed" (in this case, names and ages. the reason being is that names could be gigantic, with many many names and I do not want to client to download all the values for every single possible field available as it would be a rather large download). 我已经看到了一个typeahead.js库，但它似乎只是提取所有要自动完成的数据，而不是“按需提供数据”（在这种情况下，名称和年龄。原因是名称可能是巨大的，有很多名称，但我不想让客户端下载每个可用字段的所有值，因为这将是一个很大的下载）。

What is the best way to do this? 做这个的最好方式是什么？ Is typeahead.js support this or some alternate library better? typeahead.js是否更好地支持此库或某些替代库？

2 个解决方案

My suggestion would be to use two boxes, seems like the most logical approach to me. 我的建议是使用两个盒子，这对我来说似乎是最合乎逻辑的方法。 The first one narrows things down by name, and the second one narrows it down by age or some other field. 第一个按名称缩小范围，第二个按年龄或其他字段缩小范围。 This way you can then do an AND/OR SQL statement. 这样，您就可以执行AND / OR SQL语句。 You can also, of course, limit the number of responses that you send back from the server, as you are correct, sending back a thousand+ auto completes is of little use. 当然，您也可以限制从服务器发送回的响应数量，因为您是正确的，回送上千个自动完成没有什么用。 As far as which library, at that point you should be able to use any autocomplete library you wish, there are probably a few dozen of them. 至于哪个库，此时您应该可以使用所需的任何自动完成库，其中可能有几十个。 jquery UI, dojo, or my favorite Select2. jQuery UI，dojo或我最喜欢的Select2。

You can also of course write you own method to utilize a single text box instead of two. 当然，您也可以编写自己的方法来利用单个文本框，而不是两个。 In which case I would suggest doing it on the server-side instead of client-side. 在这种情况下，我建议在服务器端而不是客户端上执行此操作。 I don't know of any libraries that can do this automatically on the client or server-side. 我不知道任何可以在客户端或服务器端自动执行此操作的库。