`
gazeldx
  • 浏览: 105897 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jquery 插件实现百度式的autocomplete

 
阅读更多
百度输入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'
0
0
分享到:
评论

相关推荐

    jquery Autocomplete 仿百度搜索 只能搜索提示

    在IT行业中,jQuery Autocomplete是一个常用的插件,用于实现类似于搜索引擎的自动补全功能。它为用户提供了方便快捷的输入体验,尤其适用于大型数据集的筛选。本项目以"jQuery Autocomplete 仿百度搜索 只能搜索...

    jquery.autocomplete.js资源压缩包下载

    《jQuery Autocomplete 智能联想框JS实现详解》 在网页开发中,为了提高用户体验,经常需要使用到一种功能——智能联想框。这个功能可以让用户在输入框中输入文字时,自动显示与输入内容相关的建议,就像百度搜索...

    jquery表单制作text文本框autocomplete智能搜索提示框效果

    3. **jQuery插件**: jQuery有许多现成的插件可以帮助我们快速实现autocomplete功能,比如jQuery UI的Autocomplete。但在这里,我们将手动编写代码来实现这个功能,以更好地理解其工作原理。 4. **JavaScript/...

    jquery autocomplete js 文件

    这个插件基于 jQuery 库,使得在网页中实现类似百度搜索框那样的动态下拉建议变得简单易行。在本篇文章中,我们将深入探讨如何使用和配置 jQuery Autocomplete 插件,以及其背后的核心概念。 ### 1. jQuery ...

    asp.net仿百度的自动完成(autoComplete) jquery+autocomplete.js

    asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559

    jQuery自动补全自动提示插件仿百度自动提示插件

    对于这个仿百度的jQuery插件,其主要功能包括: 1. **实时响应**:插件会监听用户的输入变化,每当用户输入新的字符,就会更新提示列表。 2. **AJAX请求**:在用户输入达到一定长度(通常设置为最少字符数)时,...

    HTML5 jQuery 表单输入自动完成 autocomplete-suggestions插件.rar

    html5-autocomplete-suggestions插件实例包,是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示...

    jquery Autocomplete(类似百度搜索框)

    **jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在输入框中实现自动补全功能,类似于百度搜索框的体验。这个功能广泛应用于各种网站,帮助用户快速找到他们想要输入的信息,提高了用户界面的交互性和...

    仿百度、Google搜索效果 AutoComplete

    实现这种功能的关键技术之一是JavaScript库,这里提到的文件`jquery-autocomplete`可能就是一个基于jQuery的AutoComplete插件。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画设计和Ajax交互...

    autocomplete实现百度搜索自动填充特效

    标题中的“autocomplete实现百度搜索自动填充特效”是指在网页中实现类似于百度搜索框的自动完成功能,这种功能能够根据用户输入的字符实时提供匹配的建议列表,提高用户的输入效率和搜索体验。在Web开发中,这是一...

    jQuery Autocomplete自动完成插件

    百度的是2432次调用,80.24毫秒。 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教。 调用方法 代码如下: jQuery(“#kw”).suggest({ url:siteConfig.suggestionUrl, ...

    Jquery实现百度模糊搜索

    **jQuery实现百度模糊搜索** 在Web开发中,提供高效的搜索功能是提高用户体验的关键之一。百度模糊搜索就是一个很好的例子,它允许用户在输入关键词时就能快速得到相关结果,无需等待完整词句输入完毕。本教程将...

    Jquery插件仿百度搜索关键字自动匹配功能

    jQuery插件仿百度搜索关键字自动匹配功能详细解读: 一、基本概念介绍 1. jQuery:一个快速、小巧且功能丰富的JavaScript库,它使得HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单,极大地简化了...

    仿百度搜索的jquery自动完成功能包

    3. **jQuery插件实现** 这个功能包可能包含了一个jQuery插件,用于扩展jQuery的功能。通常,jQuery插件通过`$.fn.extend()`方法来定义,使得可以链式调用jQuery对象的方法。插件可能包括`init`、`search`、`...

    jq-Autocomplete-master 非常棒的类百度搜索提示插件

    `jq-Autocomplete-master` 是一个优秀的JavaScript插件,它模仿了百度搜索引擎的智能提示功能,使得用户在输入搜索关键词时可以快速获得相关的建议结果。这款插件基于广泛使用的jQuery库,因此易于集成到任何使用...

    jQuery仿百度搜索下拉框自动补全代码插件

    5. **插件结构**:jQuery插件通常遵循一定的结构,如使用`.fn.extend({})`来扩展jQuery对象的方法。这个插件可能定义了一个名为`autoComplete`的方法,通过`$('input').autoComplete(options)`的形式调用。 6. **...

    jQuery UI插件实现百度提词器效果

    总结起来,这个示例展示了如何使用 jQuery UI 的 `.autocomplete()` 方法来实现百度提词器效果。核心在于配置 `source` 函数以获取数据,以及处理 `select` 和 `focus` 事件以更新输入框的值。同时,我们还需要处理...

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    知识点一:jQuery autocomplete插件 jQuery autocomplete是一种JavaScript插件,它可以为输入框提供自动补全的功能。当我们输入一些字符时,它会自动从数据库或者其他的数据源中寻找匹配的条目,并且将这些条目以...

    jquery自动完成插件

    - `JQuery插件【仿百度搜索 智能感知效果】 - zhanglan478950的专栏 - 博客频道 - CSDN.NET.htm`:可能是模仿百度搜索的智能感知效果,强调了搜索提示的用户体验。 总的来说,jQuery自动完成插件是提升Web应用交互...

Global site tag (gtag.js) - Google Analytics