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. OpenCV学习 7：图像形态学：腐蚀、膨胀

    原创文章,欢迎转载,转载请注明出处 首先什么是图像形态学?额,这个抄下百度到的答案.基本思想:    用具有一定形态的结构元素去度量和提取图像中的对应形状已达到对图像分析和识别的目的,形态学图像处理表 ...

  2. android中onStartActivityForResult无返回值问题

    在activity间跳转传递参数,常见方法是通过onStartActivityForResult来做.不过今天使用 onStartActivityForResult的时候已经在上一个activity调 ...

  3. S3C6410嵌入式应用平台构建（四）——linux-3.14.4移植到OK6410-(初步启动)

    这次,还是把基本的基于我目前最新的Linux源码进行移植到OK6410吧,同时也写下我移植过程中遇到的问题及解决方法,不过有些方法是借鉴网上的,有些是自己加的,会有一些小bug. 一.基本工作 1. ...

  4. Ubuntu创建快捷方式

    正常安装putty不成功:sudo apt-get install putty 总是报网络方面的错,我只好从官网下载源码自己编译.还是很容易的,找到unix目录,然后执行:make -f Makefi ...

  5. MyBatis使用Generator自动生成代码

    MyBatis中,可以使用Generator自动生成代码,包括DAO层. MODEL层 .MAPPING SQL映射文件. 第一步: 配置好自动生成代码所需的XML配置文件,例如(generator. ...

  6. BCGControlBar使用方法（转）

    一.   关于BCGControlBar. BCGControlBar是一个基于MFC的扩展库,您可以通过完全的用户化操作构成一些类似于Microsoft Office 2000/XP/2003和Mi ...

  7. SPDY HTTP2.0

    SPDY(读作“SPeeDY”)是Google开发的基于TCP的应用层协议,用以最小化网络延迟,提升网络速度,优化用户的网络使用体验.SPDY并不是一种用于替代HTTP的协议,而是对HTTP协议的增强 ...

  8. IOS7 position:fixed 定位问题

    在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...

  9. UCML破解

    最近一直加班,好久没更新了.无良的产品经理一直催着修改功能,本想把活带回家做..结果...公司就一个UCML的加密狗...闹心....想办法破解: 1.狗复制,这个没搞过,某宝上有帮忙复制的,联系了一 ...

  10. Spring MVC 完整示例

    在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...