下载

0下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果_jav…

Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果_javascript技巧.doc

Bootstrap学习系列之使用BootstrapTypeah…

孙柳萱
2018-04-30 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果_javascript技巧doc》,可适用于高中教育领域

Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果javascript技巧Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果UnderScore官网:参考文档:页面代码:{ViewBagTitle="Index"}<scriptsrc="Scriptsbootstraptypeaheadjs"><script><scriptsrc="Scriptsunderscoreminjs"><script><div>简单使用<divstyle="margin:pxpx"><labelfor="productsearch">ProductSearch:<label><inputid="productsearch"type="text"dataprovide="typeahead"datasource='"DATA","DATA","DATA"'><div>使用脚本填充数据<divstyle="margin:pxpx"><labelfor="productsearch">ProductSearch:<label><inputid="productsearchjs"type="text"dataprovide="typeahead"><div><scripttype="textjavascript">$(document)ready(function($){$fntypeaheadConstructorprototypeblur=function(){varthat=thissetTimeout(function(){thathide()},)}$('#productsearchjs')typeahead({source:function(query,process){return"JS数据","JS数据","JS数据"},highlighter:function(item){return"==>"item"<=="},updater:function(item){consolelog("'"item"'selected")浏览器控制台输出$("#productsearch")val(item)returnitem}})})<script>支持Ajax获取数据<divstyle="margin:pxpx"><labelfor="productsearch">ProductSearch:<label><inputid="productsearchajax"type="text"dataprovide="typeahead"><div><scripttype="textjavascript">$('#productsearchajax')typeahead({source:function(query,process){varparameter={query:query}$post('UrlAction("AjaxService")',parameter,function(data){process(data)})}})<script>使用对象数据<divstyle="margin:pxpx"><labelfor="productsearch">ProductSearch:<label><inputid="productsearchobject"type="text"dataprovide="typeahead"><div><scripttype="textjavascript">$(function(){varproducts={id:,name:"object",price:},{id:,name:"object",price:},{id:,name:"object",price:}$('#productsearchobject')typeahead({source:function(query,process){varresults=map(products,function(product){returnproductname})process(results)},highlighter:function(item){return"==>"item"<=="},updater:function(item){consolelog("'"item"'selected")returnitem}})})<script><div>控制器publicActionResultIndex(){returnView()}publicActionResultAjaxService(){stringquery=""if(!stringIsOrWhiteSpace(Request"Query"))query=Request"Query"ToString()vardata=("AJAX,AJAX,AJAX")Split(',')returnJson(data)}效果图展示如下:下面继续给大家介绍BootStrap学习系列之BootstrapTypeahead组件实现百度下拉效果(续)以上所述是小编给大家介绍的Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持~

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/5

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利