简体繁体 English

使用 jquery 从头开始自动完成

[英]Autocomplete from scratch using jquery

原文 2015-09-24 05:04:28 1 2 javascript/ jquery/ html/ ajax

I know that stackoverflow is not to do my job, for that I ask for generics advices我知道 stackoverflow 不是做我的工作，因为我要求泛型建议

my autocomplet will be in a input, from what I know, input has "get" and "post" request.我的自动完成将在输入中，据我所知，输入具有“获取”和“发布”请求。 I need to make a post request, and here is my problem.我需要提出一个post请求，这是我的问题。 My autocomplete read information from a endpoint JSON, that is generated when you make a request from server, eg http://www.imobiliare.ro/sugestii/huned , I need a javascript function, that is continuous read and send information from input text to URL.我从端点 JSON 中自动完成读取信息，这是在您从服务器发出请求时生成的，例如http://www.imobiliare.ro/sugestii/huned ，我需要一个 javascript 函数，即从输入中连续读取和发送信息文本到 URL。

Eg例如

I have :" http://www.imobiliare.ro/sugestii/huned "+ T , T value from input, Information is pass to URL and generate a JSON, after that http://www.imobiliare.ro/sugestii/huned+T+I , TI values from input.我有：“ http://www.imobiliare.ro/sugestii/huned ”+ T ，来自输入的 T 值，信息被传递到 URL 并生成一个 JSON，然后http://www.imobiliare.ro/sugestii/ huned+T+I ，来自输入的 TI 值。

Hard part for me is how to send continuous that information to url without press a submit button, something like every time I pass a value in input text, is read and send automaticali to URL and make a request对我来说困难的部分是如何在不按下提交按钮的情况下向 url 发送连续的信息，就像每次我在输入文本中传递一个值时一样，被读取并自动发送到 URL 并发出请求

I can't use any existing lib.我不能使用任何现有的库。

2 个解决方案

Here is some starting points for you, which you should already know if you took a task which says "do not use any libraries".这是您的一些起点，如果您接受了一项“不使用任何库”的任务，您应该已经知道这些起点。 Autocomplete "without using any libraries" is wrong design requirement and a waste of time in almost all cases imaginable.自动完成“不使用任何库”是错误的设计要求，并且在几乎所有可以想象的情况下都是浪费时间。

Bind a listener on "keyup" event.在“keyup”事件上绑定一个监听器。
This listener should fire not each time "keyup" is fired, but with delay of ~500 ms, or else you'll be triggering POST requests on each letter entered, and in case of "deoxyribonucleic acid" will be probably overkill.此侦听器不应在每次触发“keyup”时触发，而是延迟约 500 毫秒，否则您将在输入的每个字母上触发 POST 请求，并且在“脱氧核糖核酸”的情况下可能会过大。

That's all.就这样。 You absolutely do not need any "continuous" checking, only key presses.您绝对不需要任何“连续”检查，只需要按键即可。

For "continuous" checking you should use setTimeout and setInterval functions.对于“连续”检查，您应该使用setTimeout和setInterval函数。

EDIT编辑

Here is JsFiddle with the crude solution showing both of my points : you attach an event listener to the text input and then ( with proper debouncing mechanics! ) on key presses you send a request to your backend API.这是 JsFiddle 的粗略解决方案，显示了我的两个观点：您将事件侦听器附加到文本输入，然后（使用适当的去抖动机制！ ）在按键时向后端 API 发送请求。 Everything else is up to your imagination.其他一切都取决于您的想象力。 Usually results are returned into a dropdown list, but I certainly would not reimplement that from scratch.通常结果会返回到下拉列表中，但我当然不会从头开始重新实现它。