web开发中，肯定遇到像百度、google这种搜索的功能吧，那智能表单中的自动完成可以做什么呢，下面来揭晓：

1、包含像google、百度等类似的简单搜索

2、复杂结构的支持，比如说 输入产品编号，需要将产品的编号、产品的名称、产品的单价、产品的备注信息等填写会表单中的某个位置

代码如下(页面地址：https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html)：

自动完成

note:需要引入js文件：jquery-ui.js、jquery.fn.extend.js

在表单生成完成后，通过指定元素调用SmartSearch方法

参数说明：

url:请求的url

beforeSearch:可选，在发送请求之前调用的方法，改方法有一个参数data包含要发送的数据，如果需要添加或者修改要发送的参数，修改次参数即可

formatItem:可选，如果返回的不是简单的数组字符串，则必自定义操作，用于格式化界面显示的内容，例中显示的是产品编号 + 产品名称

callback:可选，如果返回的不是简单的数组字符串，则必自定义操作，用于赋值

note:如果接口返回的是简单的字符串数组，则 formatItem和callback皆可省略

这是我本地测试项目中运行的截图：

详细使用方式请参照demo

上一章：BootStrap 智能表单系列 九 表单图片上传的支持

下一章：BootStrap 智能表单系列 十一 级联下拉的支持

本系列首页：BootStrap 智能表单系列 首页

BootStrap 智能表单系列 十 自动完成组件的支持的更多相关文章

  1. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  2. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  3. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  4. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  5. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  6. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  7. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  8. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  9. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

随机推荐

  1. android DatePickerDialog theme

    网上搜索了下没有找到DatePickerDialog的各种 Theme 的样例.我就一个一个试了下,传上图片 DatePickerDiaolog有两个构造函数分别是: DatePickerDialog ...

  2. Oracle EBS-SQL (SYS-12):查询各Profile的设置情况.sql

    SELECT pro.profile_option_name, pro.user_profile_option_name, lev.level_type TYPE, --lev.level_code, ...

  3. 使用MySQL处理百万级以上数据时，不得不知道的几个常识

    最近一段时间参与的项目要操作百万级数据量的数据,普通SQL查询效率呈直线下降,而且如果where中的查询条件较多时,其查询速度简直无法容忍.之前数据量小的时候,查询语句的好坏不会对执行时间有什么明显的 ...

  4. 解决：未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0

    开发环境:Microsoft Visual Studio 2013 MVC4.0 使用SignalR的过程中随着版本的升级,其它程序集也跟着升级,如Newtonsoft.Json,一般编译的时候,如果 ...

  5. git多人协作

    多人协作 当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 要查看远程库的信息,用git remote: $ ...

  6. NOI2015 Day1

    NOI2015 Day1 程序自动分析 题目描述:给出等式或不等式\(n\)条,问\(n\)条式子是否成立. solution: 用并查集处理等式,在判断不等式是否成立. 时间复杂度:\(O(n)\) ...

  7. HDU 5716 带可选字符的多字符串匹配（ShiftAnd）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5716 [题目大意] 给出一个字符串,找出其中所有的符合特定模式的子串位置,符合特定模式是指,该子串 ...

  8. POJ1008

    2014-08-22 题意: (有中文版题目..)  就是两种历法的转换 思路: 把两种历法的细节了解了就很简单了 Haab历法一年365,Tzolkin一年260天 先求出总天数sumDay,然后s ...

  9. 使用MD5完成自定义Person对象的加密过程

    ---恢复内容开始--- 首先:我们对自定义Person对象的加密过程所用的方法是归档写入文件的方法. 第一步:创建Person,继承于NSObject,然后在Person.h文件遵守NSCoding ...

  10. Let the Balloon Rise(map)

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...