• 关于 devbridge


    目前据我所知最好用的 autocomplete 插件就是 jquery-ui 的 autocomplete 以及 devbridge 的 autocomplete 插件。

    我最终选择了 devbridge 的 autocomplete 插件,主要是不想引用 jquery-ui 的 css 文件。

    官方网址:https://www.devbridge.com/sourcery/components/jquery-autocomplete/

    先看一下autocomplete的参数

    • serviceUrl:服务器端的URL或者是返回 Url 字符串的回调函数
    • ajaxSettings:jQuery Ajax 请求的额外配置
    • lookup:查询的数据列表。字符串数组或者对象字面量(格式 { value: 'string', data: any }
    • lookupFilter: function (suggestion, query, queryLowerCase) {} 本地数据查询的过滤函数
    • lookupLimit:查询条数限制,默认值:no limit
    • onSelectfunction (suggestion) {} ,用户选择查询结果后的毁掉函数
    • minChars:触发提示的最小单词数,默认值:1
    • maxHeight:提示列表容器的最大高度,默认值:300
    • deferRequestBy:延迟Ajax请求的毫秒数,默认值:0
    • width:提示容器的宽度,默认值:auto
    • params:参数传递的请求,可选
    • formatResultfunction (suggestion, currentValue) {}
    • delimiter:字符串或正则表达式,分割输入值并将最后一个作为查询词,一般逗号分割
    • zIndex:提示容器的z-index值,默认值:9999
    • type:获取提示的 Ajax 请求方式,默认值:get
    • noCache:是否缓存提示结果,默认值:false
    • onSearchStartfunction (query) {}
    • onSearchCompletefunction (query, suggestions) {}
    • onSearchErrorfunction (query, jqXHR, textStatus, errorThrown) {}
    • onInvalidateSelectionfunction () {},选择提示结果后,如果input的值发生变化则调用函数
    • triggerSelectOnValidInput:如果匹配查询,只要聚焦 input 就触发 onSelect 函数,默认值:true
    • preventBadQueries:默认值:true
    • beforeRenderfunction (container) {} 在展示查询结果之前调用函数
    • tabDisabled:默认值:false
    • paramName:默认值:'query'
    • transformResultfunction(response, originalQuery) {}
    • autoSelectFirst:是否自动填充查询列表的第一项,默认值:false
    • appendTo:查询列表容器被添加到那个元素中,默认值:document.body
    • dataType:服务器返回的数据格式
    • showNoSuggestionNotice:如果查询结果为空是否有提示语,默认值:false
    • noSuggestionNotice:提示语,默认值:No results
    • forceFixPosition:默认值:false
    • orientation:提示容器的垂直位置,默认值:'bottom',可选值'top','auto'
    • groupBy:提示数据对象的属性值

    配置参数很多,但是有用的可能就几个。

    实现多选的关键参数是 delimiter, onInvalidateSelection , triggerSelectOnValidInput 

    实际项目中autocomplete的难点在于需要查询结果的索引值并保存到隐藏域中,所以 onInvalidateSelection ,triggerSelectOnValidInput 这两个参数非常关键

    示例演示

    该演示代码的多选没有删除操作,留给大家一点思考的余地。当然多选的方式不唯一。

  • 相关阅读:
    GitLab--简单使用
    Git
    GitLab--安装部署
    RabbitMQ--工作模式
    服务器上TIME_WAIT过多怎么处理
    LVS Nginx HAProxy区别
    部署 Kubernetes 集群(kubeadm方式)
    office选项-》高级-》显示 中, 显示此数目的“最近使用的文档” 为灰色,无法更改
    期末测验: 课程水平综合测验 (第10周)-程序题
    测验9: Python计算生态纵览 (第9周)-程序题
  • 原文地址:https://www.cnblogs.com/yujihaia/p/7417150.html
走看看 - 开发者的网上家园