jquery 仿百度搜索

云浩坤 3个月前 39浏览 0评论

jquery 仿百度搜索是一种常见的网页交互效果,通过使用jquery插件,能够模拟百度搜索的输入提示功能。下面是一个简单的示例:

  $(function() {
    $('#searchbox').autocomplete({
      source: function(request, response) {
        $.ajax({
          url: 'https://suggest.taobao.com/sug',
          dataType: "jsonp",
          data: {
            code: "utf-8",
            q: request.term
          },
          success: function(data) {
            response($.map(data.result, function(item) {
              return {
                label: item[0],
                value: item[0]
              }
            }));
          }
        });
      },
      minLength: 1,
      delay: 300
    });
  });

上述代码使用了jquery的autocomplete插件实现。$('#searchbox')指定了搜索框的id,source指定了搜索框的数据源,这里使用了淘宝搜索的接口。输入框中每输入一个字符,就会向接口发送请求返回匹配的结果,通过$.map方法将数据转化成插件需要的格式{label: item[0],value: item[0]},并将结果返回给插件展示。

另外,minLength: 1指定了输入的最小长度为1,delay: 300指定了输入框输入后延迟300ms开始查询。

以上就是使用jquery实现仿百度搜索提示的简单示例。