首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery AutoComplete结果格式?

您好!JQuery AutoComplete是一种基于jQuery的插件,用于实现自动完成功能。它可以根据用户输入的内容,从服务器端获取数据,并在下拉列表中显示匹配的结果。

关于JQuery AutoComplete的结果格式,通常有以下几种:

  1. 字符串数组:最简单的格式是一个字符串数组,其中每个字符串表示一个匹配项。例如:
代码语言:javascript
复制
[
  "apple",
  "banana",
  "orange"
]
  1. 对象数组:每个对象包含一个标签和一个值。标签是用于显示的文本,值是用于选择时返回给用户的值。例如:
代码语言:javascript
复制
[
  {
    "label": "apple",
    "value": "1"
  },
  {
    "label": "banana",
    "value": "2"
  },
  {
    "label": "orange",
    "value": "3"
  }
]
  1. 自定义格式:您还可以自定义返回的数据格式,只需要在初始化插件时指定一个函数来处理数据即可。例如:
代码语言:javascript
复制
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
    $.getJSON( "search.php", {
      term: request.term
    }, response );
  },
  focus: function( event, ui ) {
    $( "#autocomplete" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#autocomplete" ).val( ui.item.label );
    $( "#autocomplete-id" ).val( ui.item.value );
    return false;
  }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    .appendTo( ul );
};

在这个例子中,我们使用了一个自定义的函数来处理数据,并在下拉列表中显示了两个字段:标签和描述。

总之,JQuery AutoComplete的结果格式可以根据您的需求进行自定义,以实现最佳的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery autoComplete 自定义回写样式

$("#itemName").autocomplete(url,{               minChars: 0, //在触发autoComplete前用户至少需要输入的字符数.            ...max: 20,//autoComplete下拉显示项目的个数             autoFill: false, //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框            ...//mustMatch: true, //autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框             matchContains: true...multiple: false, //是否允许输入多个值即多次使用autoComplete以输入多个值             cacheLength: 20,             delay:...itemName                         }; return rows;             }, formatItem: function (data, i, max) {//格式化列表中的条目

2.3K20
  • jQuery格式化显示json数据

    展示数据时,默认直接展开json 格式化好的数据,方便其他开发人员调用。 但是jq22.com 提供的插件,有一个textarea输入框,我需要把它给去掉。...默认json格式化的数据中,key是没有带双引号的,我需要默认勾选它,因此要修改js代码。 二、修改插件代码 基于上面的2点需求,下载jq22.com 提供的插件后,解压代码。...查看json格式数据插件     <link rel="stylesheet" type="text/css" href="http://www.jq22.com/<em>jquery</em>/bootstrap...type": "Chocolate"},                 {"id": 5004, "type": "Maple"}             ]         };         //格式化...查看json格式数据插件     <link rel="stylesheet" type="text/css" href="/static/plugins/json-viewer/css

    7K30

    vscode前端插件安装「建议收藏」

    很实用【HTML/XML】; 6.Auto Rename Tag :修改 html 标签,自动帮你完成尾部闭合标签的同步修改; 7.Path Autocomplete :路径智能补全; 8.Path Intellisense...for HTML:编写html代码的朋友们对html代码的一大体现就是重复,如果纯用手敲不仅累还会影响项目进度,这款自动补全插件真的很棒; 12.beautify :格式化代码的工具,可以格式化JSON...|JS|HTML|CSS|SCSS,比内置格式化好用; 13.jQuery Code Snippets:jquery 重度患者必须品; 14.Debugger for Chrome:让 vscode 映射...chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~; 15.jQuery Code Snippets:jquery 重度患者必须品; 16.vscode-icon...vscode已经原生支持,在function上输入/** tab) 23.filesize:在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间; 24.Code Runner :代码编译运行看结果

    91230

    JavaScript实现模糊推荐的input框(类似搜索框)

    如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocompletejquery的...废话少说直接上代码: 引用,需要jquery-ui和jquery: <script src="/static/plugins/jQueryUI/<em>jquery</em>-ui.min.js"...自动填充 2、keyup事件 3、ajax与后端交互 简单来说: 1、文本输入框的每次键入,触发一个keyup事件; 2、事件的处理方式是向后端请求模糊推荐的项items,这里的返回数据结果是: {..."pathN"] } 3、autocomplete自动填充hidden输入框,其余的事情jquery-ui会为你处理好; 4、当你点选完成,或者是输入完成后,path框失去焦点(blur事件

    4.5K90

    form表单提交的几种方式

    不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。...还有一种情况是ajax方法中定义了 dataType:"json"属性,就一定要返回标准格式的json字符串,要不jQuery1.4+以上版本会报错的,因为不是用eval生成对象了,用的JSON.parse...}) } controller类不变,启动项目并访问http://localhost:8080/query.html 这个是我定义的页面返回结果表示成功...提示:您可以把表单的 autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。...placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。 该提示会在用户输入值之前显示在输入字段中。

    6.4K20
    领券