autocomplete

一、 HTML5 简介 HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2014 年 10 月 29 日，万维网联盟宣布，经过几乎 8 年的艰辛努力， HTML5 标准规范终于最终制定完成了，并已公开发布。 HTML5 不仅仅是超文本标记语言的新版本，而是一整套浏览器新 API 的综合 ： 新的语义标签。我们知道 HTML 就是超文本标记语言，负责描述的是文档的语义、结构。 HTML5 中，提供了非常多的新的标签， <header> 、 <section> 、 <footer> 、 <nav> 、 <aside> 、 <article> 、 <address> 等等。丰富了表单元素。 新的本地存储。 HTML 如果想往客户端存储东西（不是服务器），只能通过 cookie 。 HTML5 中提供了一个新的 API ，叫做本地存储，可以让浏览器轻松的在客户端本地存储数据。 设备兼容特性。 HTML5 提供了移动设置的所有兼容的 API 方案，浏览器获得摄像头、陀螺仪、蜂鸣器等等的权利。对于 PC 浏览器，还加上了全屏 API 和拖放 API 。 连接特性。 HTTP 是无连接的，你的浏览器和服务器之间没有长久链接， HTML5 中提出了 web socket 特性

UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的，Kendo UI widgets 是以 jQuery 插件形式提供的。这些插件的名称基本上都是以 kendo 作为前缀。比如 Kendo 的 autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI 组件是以 “kendoMobile”为前缀。比如：”kendoMobileListView”. 使用 jQuery 初始化 Kendo UI 组件 Kendo UI 组件使用页面上 HTML 元素来创建，使用 CSS 选择器 然后调用 jquery 插件（kendo UI 组件）将这些 HTML 元素转换为 Kendo UI 组件（基本方法和 jQuery UI 类似）。 例如：初始化一个自动提示输入框组件（autocomplete) < input id ="autocomplete" /> < script > $( " #autocomplete " ).kendoAutoComplete([ " Apples " , " Oranges " , " Grapes " ]); </ script > 其中 $(“#autocomplete”).kendoAutoComplete([“Apples”, “Oranges”, “Grapes”]);

基础用法 1 < el-input v-model ="input1" palcehoder ="请输入" ></ el-input > 2 3 var Main = { 4 data() { 5 return { 6 input1: '' 7 } 8 } 9 } 10 var Ctor = Vue.extend(Main) 11 new Ctor().$mount('#app') 基础输入框 可指定不同的属性值对输入框进行设置 disabled ：输入框禁用；size：输入框大小（large、medium、small、mini）；clearable：可清空 带有 icon 的输入框 　　通过 prefix-icon 或 suffix 属性指定 input 组件头部或尾部显示图标。也可以通过 solt 方式来放置图标 　　1.属性方式 < el-input placeholder ="请输入" v-model ="input10" prefix-icon ="el-icon-search" ></ el-input > < el-input placeholder ="请输入" v-model ="input10" suffix-icon ="el-icon-search" ></ el-input > 　　2.solt 方式 < el-input placeholder =

踩坑问题描述： 问题一： 获取到后端返回的数组，并将数组传入作为 results 传入 callback 后，焦点放在 输入框 上的时候，并未出现任何内容，只出现了一个不完整的空白框。 问题解决方案： 这个问题开始我以为是传进 callback 的 data 格式不对。Element官网上是这么写的： 我传入的是对象数组，是没问题的。 后来我仔细阅读了 Elemen t带建议查询输入框的 Demo 代码并查阅相关资料发现，输入建议列表的数据只来源于 data:[] 中的 value 字段！！！ 于是，我将后端传回的 response 处理了，将 response 中需要展示的字段组成 {value:'输入建议'} 这种格式，问题解决。 searchAppNodeApi(searchQuery).then(response => { this .loadAll = response.data this .devEuiArr = []; for (let item of this .loadAll) { this .devEuiArr.push({"value1" : item.dev_eui}) } }) searchAppNodeApi() 是我请求后端的api方法，拿到请求成功的回调函数的 response 参数。但是， response 里面包含很多我不需要的字段

激活即列出输入建议 的情况 官网的例子 <el-col :span="12"> <div class="sub-title">激活即列出输入建议</div> <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> </el-col> <script> export default { data() { return { restaurants: [], state1: '', }; }, methods: { querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return

[TOC] HTML之form表单 功能: 表单用于向服务器传输数据,从而实现用户与web服务器的交互 表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等等 表单还可以包含textarea,select,fieldset和label标签 表单属性: 属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集） action(*) 规定向何处提交表单的地址（URL）（提交页面） autocomplete 规定浏览器应该自动完成表单（默认：开启） enctype(*) 规定被提交数据的编码（默认：url-encoded） method(*) 规定在提交表单时所用的 HTTP 方法（默认：GET,可改成POST） name 规定识别表单的名称（对于 DOM 使用：document.forms.name） novalidate 规定浏览器不验证表单 target(*) 规定action属性中地址的目标（默认：_self） 表单元素: 基本概念： HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。 表单一般用来收集用户的输入信息 表单工作原理： 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

页面写死el-select下拉框标签： 通过v-for="item in stateArr"绑定，stateArr声明在Vue组件里面的data参数里面代码如下： <el-form class="small-space" :model="createdItem" label-position="left" label-width="100px" style='width: 100%; margin-left:0px;'> <el-form-item label="产品编号" :required=true> <el-input name="c_ID" v-model="createdItem.c_ID" autoComplete="on" maxlength="20"></el-input> </el-form-item> <el-form-item label="产品名称" :required=true> <el-input name="c_Name" v-model="createdItem.c_Name" autoComplete="on" maxlength="20"></el-input> </el-form-item> <el-form-item label="产品状态"> <el-select v-model="createdItem.c_State"