javascript - 如何实现input框获取实时输入的值传入后台PHP中查询相关结果后返回到前台实时显示结果？

Question

如题，我找了网上的插件。一个是jquery-input-match，这个我照着做了，但是没有办法实时显示结果，只能是提前查好全部结果后传给html页面，然后根据输入的值显示不同的结果，这个不是我想要的。网址：http://www.open-open.com/lib/...。另外一个是脚本之家的一个例子，但是他使用的是onkeyup，这个如果我想要输汉字的时候，就没法用。请大神帮忙看下如何解决，谢谢。（就像是百度搜索输入框里边的那样，随便输入一个汉字或者字符，都会出现相应的候选项）

Answer 1

如果你觉得onkeyup不行，可以用oninput事件，另外得判断用户是不是暴力输入，所以配合函数去抖(debounce)。

然后在oninput的事件监听中做ajax请求。得到数据后前端解析并渲染。

Answer 2

可以使用jquery 自带UI AUTOcomplete

http://www.runoob.com/jqueryu...

Answer 3

github有很多这样的插件（不建议到奇奇怪怪的网站搜，文档历史久远，还有很多错误在里面），搜索结果

无非就是输入（keydown）的时候，触发事件，然后使用类似loadsh debounce限制请求频率，后端接受请求处理搜索逻辑然后返回json数据，前端解析显示。自己写一个也很快的...

PS: keydown，keyup，change...看你的需求吧

Answer 4

用了Vue或者react框架倒是比较好解决，用框架的watch

如果不是的话，oninput、onkeyup在汉字输入时都有问题，倒是推荐你用setTimeout的方式不停地去查询input的值是否改变

Answer 5

keyup 可以

Answer 6

    $('input').on('input', function(e){
        console.log($(this).val()); //这样能监听到input的内容变化
    })

获取到变化后的值， 就可以实时去后台请求，然后再把结果显示到页面。

注意： 要对input后的操作 做节流限制.