php-联想搜索

墨蓝 2022-08-22 13:28 182阅读 0赞

联想搜索

1.联想功能需要数据库，

2.每字联想还要ajax传值，

但是那，在这里咱们不用ajax，因为ajax的速度问题，所以我采用调用jquery.

效果展示：

![Center][]、

代码实现：

调用时先引进jquery才能实现

<meta charset="utf-8">
    <input type="text"  value="" id="wd">
    <div style='background: #e1e1e1;width:220px;display:none;' id="rs">
        <ul>
    
        </ul>
    </div>
    <script src="jq.js"></script>
    <script>
        $(function(){
            $("#wd").keyup(function(){
                var word=$(this).val();
                $.ajax({
                    url:'http://suggestion.baidu.com/su?wd='+word+'&cb=showli',
                    dataType:'jsonp',
                    jsonpCallback:'showli',
                    success:function(txt){
                        var arr=txt.s;
                        var li="";
                        $.each(arr,function(i,val){
                            li+="<li>"+val+"</li> ";
                        });
                        $("#rs ul").html(li);
                        $("#rs").slideDown('fast');
                        //鼠标经过元素的背景颜色改变
                        $("#rs ul li").bind('mouseenter',function(){$(this).css({'background':'yellow'})});
                        $("#rs ul li").bind('mouseleave',function(){$(this).css({'background':'#e1e1e1'})});
                        $("#rs ul li").bind('click',function(){
                            $("#wd").val($(this).html());
                            $("#rs").slideUp('fast');
                        });
                }})
        })
        })
    </script>

[Center]: /images/20220722/d0d178126ee240658fab2fc15d723d64.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 名称搜索排序,php – 按名称弹性搜索排序

我尝试使用弹性搜索&amp ;,按名称对文档进行排序.官方的PHP客户端,我该怎么办？ $params = \[ 'index' => $this->index , 't

Love The Way You Lie/ 2023年01月15日 05:56/ 0 赞/ 123 阅读

相关小程序的模糊联想搜索，下拉框选择

![在这里插入图片描述][20200828191907503.gif_pic_center] [github地址 https://github.com/pretty-git

偏执的太偏执、/ 2022年12月02日 00:59/ 0 赞/ 187 阅读

相关 elementui组件el-autocomplete 联想搜索

`autocomplete` 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 `querySearch(querySt

短命女/ 2022年10月26日 14:23/ 0 赞/ 386 阅读

相关 php-联想搜索

联想搜索 1.联想功能需要数据库， 2.每字联想还要ajax传值，但是那，在这里咱们不用ajax，因为ajax的速度问题，所以我采用调用jquery. 效果展示：

墨蓝/ 2022年08月22日 13:28/ 0 赞/ 183 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

╰+攻爆jí腚メ/ 2022年07月12日 03:29/ 0 赞/ 280 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

我不是女神ヾ/ 2022年07月12日 03:29/ 0 赞/ 441 阅读

相关 angular联想搜索

转自：https://www.cnblogs.com/hjx-blog/p/6597681.html 组件组成：HTML模板 + JS文件组件原理：HTML模板就是规定组

- 日理万妓/ 2022年05月29日 03:07/ 0 赞/ 185 阅读

相关搜索框动态显示联想内容

一、效果展示 ![20180801163344.png][] 网页HTML结构 <div id="header-search" class="search

约定不等于承诺〃/ 2022年05月18日 09:08/ 0 赞/ 199 阅读

相关 Android----android利用数据库实现搜索联想功能

[【转】android利用数据库实现搜索联想功能][android] 主要实现的效果是和google搜索一样，实现联想功能，如用户输入a，列表中则显示以a开头的数据库中的信息

àì夳堔傛蜴生んèń/ 2022年03月28日 07:16/ 0 赞/ 297 阅读

相关搜索框的自动联想功能

一后端实现 1 TeacherController / 功能描述：根据关键字查询讲师名列表 @param key 搜索的关键

港控/mmm°/ 2021年07月24日 15:05/ 0 赞/ 456 阅读