百度输入so就能提示sogou等等,一点击就把该值上屏。这个功能用jquery.plugin可以实现。
在github上面jquery 插件有两种方式:jquery-tokeninput和jqueryui的autocomplete。前者我用了下,对于jquery-tokeninput提供的样式和样式的自定义不够满意。样式太死,太少了。因为它把原来的<input type='text'>隐藏了用div ul li等模拟了,因此导致样式效果不够好。
因此我看到了https://github.com/crowdint/rails3-jquery-autocomplete。这个和rails集成了。但是可惜,这个程序员集成的很烂。很不灵活。连关联查询显示relation Model数据并显示目前都不支持。所以我自己直接用jquery-tokeninput实现了。真的没有必要用rails3-jquery-autocomplete这玩意。
下载jqueryui后看它的demo中的源代码,很容易实现。
javascript:
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/orders/search_dishes?store_id=#{params[:store_id]}&q=" + $("#city").val(),
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(d) {
response($.map(d,function(item){
return {
label: item.name,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
.demo
.ui-widget
label for="city"
| Your city:
input id="city"
.ui-widget style="margin-top:2em; font-family:Arial"
| Result:
#log style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"
controller.rb:
def search_dishes
store = Store.find(params[:store_id])
dishcates_ids = store.dishcates.collect{|f| f.id}
respond_to do |format|
format.json {
render json: dishes.as_json(
:include => { :dishcate => {
:only => [:name] } },
:only => [:name, :price]
)
}
end
end
routes.rb:加上
get 'orders/search_dishes' => 'orders#search_dishes'
分享到:
相关推荐
asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559
html5-autocomplete-suggestions插件实例包,是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示...
jQuery自动补全自动提示插件仿百度自动提示插件
于工作中需要用到自动提示这个功能,呵呵,自己又是js小菜,于是百度了一下,找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能,于是down下来了改成了php版的,并加了支持向上/向下选择文字等功能,...
jquery 一个百度搜索自动匹配jquery插件。很好使用的。
jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流...
主要修改了两个地方: 一、上下选择与输入值同步问题。 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的... 另:附件里的实现了选择后自动提交,也就和google、百度的效果完全一样了。 下载地址
本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验。 本文将使用jquery ui的autocomplete...
本文实例讲述了jquery UI实现autocomplete在获取焦点时得到显示列表功能。分享给大家供大家参考,具体如下: 在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择...
jquery.autocomplete 是一款比较好用的智能补全插件(类谷歌,百度),遗憾的是很难找到相关的教程,笔者自己的使用经验算是给大家一个入门(还有很多强悍功能没用到)。插件和说明是在一起的,下载下来都在了
本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下 需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。 js部分: //自动完提示 function tip(obj) { $( obj )....
因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码。 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn....
项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能
百度的是2432次调用,80.24毫秒。 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教。 调用方法 代码如下: jQuery(“#kw”).suggest({ url:siteConfig.suggestionUrl, ...
width:300px" autocomplete="off" /> #autoDis .currt{ background:#CCC; color:#FFF;} w: 150, /*显示宽度px*/ /* ajaxUrl: '', /*返回json数据*/ /* ajaxType: 0, //0 :表示联想数据为source数据 1:ajax ...
jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用。关于autocomplete的介绍也很多,有兴趣的朋友可以去试试。 看标题就知道,这里只是分享一个插件,不会讨论后台搜索的相关算法和过程,也就是...
首先需要的文件有jquery.js,jquery.autocomplete.js,jquery.autocomplete.js,这三个文件,哪里有?百度、谷歌都可以找到。可以去官网上下,里面包含了一些demo,只留下这三个文件即可。 js代码: 复制代码 代码...
很简单,我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了。这个插件的官方地址为:JQuery AutoComplete,里面也有示例代码。 下面我们将以一个身份证号自动查询为例,来看看JQuery ...