百度搜索引擎下拉框怎么做

我们在日常平凡登录网站时,可能会发现一种功能,就是在利用搜刮引擎进行搜刮时,会在搜刮引擎的输入框提醒出多个可能搜刮的条目,用户体验很是的好,那么,搜刮引擎下拉框怎么做呢,主动补全提醒搜刮怎么做呢,下面本文就介绍一下。

方式/步骤

  1. 1

    实现该功能需依靠jquery.js,jquery.autocomplete.js,先引入这两个js包,以及jquery.autocomplete.css样式文件,

    如图所示。

  2. 2

    该不全插件要连系input元素利用,也就是在input中进行搜刮时,会达到主动提醒补全的结果,在html文件中界说input元素,以下是部门代码截图,如图所示。

  3. 3

    那么利用autocomplete主动补全插件,也就很是简单了,下面下介绍一下最简单的利用方式,只要把要搜刮的数据放进一个数组之中即可,

    var language = [

              "Chinese",

              "English",

              "Spanish",

              "Russian",

              "French",

              "Japanese",

              "Korean",

              "German"

                ];

    然后利用

    $("#end").autocomplete({

        source: [ 

            language

        ]

    });即可,代码如图所示。

  4. 4

    下面我们可以看一下运行成果,例如说搜刮带有C字的说话,如图所示。

  5. 5

    下面我们看一下怎么和后台数据连系起来,可以与ajax一路利用,将ajax返回的数据作为上面的数组,直接赋给autocomplete插件利用,代码如图所示。

  6. 6

    下面可以看一下真是的结果,可以看到,搜刮“上”字之后,可以主动查询出数据库中所有带有上字的地址,如图所示。

  7. 7

    当然了,样式也是可以本身进行调整的,利用起来很是的简单便利。

  8. 8

    以上就是搜刮引擎下拉框怎么做的方式介绍,但愿可以帮到大师。

  • 发表于 2019-01-24 00:00
  • 阅读 ( 188 )
  • 分类:其他类型

相关问题

0 条评论

请先 登录 后评论