jquery+ajax 类百度输入框

　　这篇文章，一拖再拖，明日何其多，正好今天元气满满，就简单写完

复制代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery 自动完成（Autocomplete） - 分类</title>
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <style>
      .ui-autocomplete-category {
        font-weight: bold;
        padding: .2em .4em;
        margin: .8em 0 .2em;
        line-height: 1.5;
      }
  </style>
  <script>
  　　$(function() {
          $.widget( "custom.catcomplete", $.ui.autocomplete, {
            _renderMenu: function( ul, items ) {
              var that = this,
                currentCategory = "";
              $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                  ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                  currentCategory = item.category;
                }
                that._renderItemData( ul, item ); 
              }); 
            }
    　　　　});
     　　 　var d1 = "anders";
      　　　var d2 = "Products";
      　　　var data = [
          　　{ label: d1, category: "" },
          　　{ label: d1, category: "" },
          　　{ label: d1, category: "" },
          　　{ label: d1, category: "Products" },
          　　{ label: "annk K12", category: "Products" },
          　　{ label: "annttop C13", category: "Products" },
         　　 { label: "anders andersson", category: "People" },
          　　{ label: "andreas andersson", category: "People" },
         　　 { label: "andreas johnson", category: "People" }
     　　　　];
     
     　　　　$( "#search" ).catcomplete({
         　　 delay: 0,
          　　source: data
     　　});
  　　});
  </script>
</head>
<body>
　　<input id="search">
</body>
</html>
复制代码

效果查看：

 

有人就想，我要ajax请求后台，动态获取怎么写？

以下是关键代码

复制代码
　　　　　　$(function() {
                $.widget( "custom.catcomplete", $.ui.autocomplete, {
                    _renderMenu: function( ul, items ) {
                      var that = this,
                        currentCategory = "";
                      $.each( items, function( index, item ) {
                        if ( item.category != currentCategory ) {
                          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                          currentCategory = item.category;
                        }
                        that._renderItemData( ul, item ); 
                      });
                    }
                  });
                var option = {  
                        max: 12,    //列表里的条目数  
                        minChars: 0,    //自动完成激活之前填入的最小字符  
                        width: 400,     //提示的宽度，溢出隐藏  
                        scrollHeight: 300,   //提示的高度，溢出显示滚动条  
                        matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示  
                        autoFill: true,    //自动填充  
                        minLength: 0,  
                        select: function (event, ui) {
                            selectEnterprise(ui.item.id)；//根据选择获取选中id
                        }  
                };  
                var dataArray=[];  
                $.ajax({
                    url: '${ctx}/enterprise/enterprise/autocomplete',
                    type: 'post',
                    dataType: 'json',
                    success: function(data){
                        for(var i=0; i<data.length; i++){
                            var vo = data[i];
                            dataArray.push({label: vo.label,category: vo.category,id : vo.id});
                        }
                    }
                })
                $( "#tempName" ).catcomplete({source: dataArray},option).on('focus', function(){$(this).keydown();});  
           });

复制代码

 

代码下载：https://github.com/FlyWithFish/project

posted @   Nausicaä  阅读(743)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
点击右上角即可分享
微信分享提示