`
yyyyy5101
  • 浏览: 151626 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

使用autocomplete实现google下拉框

阅读更多
1. 在页面引入js和css
<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript' src='jquery.bgiframe.min.js'></script>

<script type='text/javascript' src='jquery.ajaxQueue.js'></script>

<script type='text/javascript' src='thickbox-compressed.js'></script>

<script type='text/javascript' src='jquery.autocomplete.js'></script>

<script type='text/javascript' src='localdata.js'></script>         //使用本地文件时引入此js

<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />

<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />

2.
//增加如下代码

<script type="text/javascript">

$().ready(function() {

$("#autocompletebox").autocomplete("search.php", {

  width: 260,

  selectFirst: false,

  max:  20,

});

$("#autocompletebox").result(function(event, data, formatted) {

  if (data)

   $(this).parent().next().find("input").val(data[1]);

});

});

</script>



//html文件中要使用autocomplete的文本框如下

<input type="text" id="autocompletebox">
3.

//search.php为根据输入的关键词生成数据的文件,格式如下:

<?php
$q = strtolower($_GET["q"]);
if(!$q) return;

$con=mysql_connect("localhost:3306","root","");
      if(!$con){
         die('Could not connect:'.mysql_error());
      }
mysql_select_db("number_domain",$con);

$sql="select * from nd_search";
$result=mysql_query ($sql);
while ( $row= mysql_fetch_array ($result))
{
if ( strpos (strtolower ( $row['keyword']) ,$q) !== false ) {
echo $row['keyword'] . "\n";
}
} ?>


完成   在IE下是正确的 在fixfox中会输入中文是会有问题:
问题原因:
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。

解决办法:

网上查到的最多做法是修改jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。

我的方法原理是,补充一个原插件触发查询的事件,就是当input输入栏发生字符变化时,重新进行查询(调用其内部的onChange函数),这里主要针对firefox而言,因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码:

.bind("input", function() {
    // @hack by liqt:support for inputing  chinese characters  in firefox
    onChange(0, true);
});





分享到:
评论

相关推荐

    jquery实现Google自动下拉框

    ### 使用jQuery 1.3实现Google自动下拉框功能解析 #### 一、背景与目的 随着Web技术的发展,用户体验成为衡量网站质量的重要标准之一。其中,自动完成(Auto Complete)功能作为提升用户输入效率的有效手段,在众多...

    可输入的下拉框(autoComplete)

    标题中的“可输入的下拉框(autoComplete)”指的是自动完成或自动填充功能,它在用户界面设计中被广泛使用,特别是在Web表单和移动应用中。这种功能结合了文本输入框和下拉列表,当用户在输入框中键入文字时,系统...

    ASP.NET Google下拉框 实例(包含数据库)

    在这个实例中,我们关注的是如何实现一个类似于Google下拉框的输入框自动完成功能,它能够为用户提供方便的搜索建议,提高用户体验。这个实例包含了前端JavaScript代码以及后端与数据库交互的部分。 在"ASP.NET ...

    可输入下拉框(select)源代码

    在网页设计中,"可输入下拉框"(通常称为Autocomplete或Typeahead下拉框)是一种增强用户体验的交互元素。传统的HTML `&lt;select&gt;` 标签仅允许用户从预定义的选项中选择,但可输入下拉框允许用户在输入时获取匹配建议...

    google-place-autocomplete:React在React上使用Google Place Autocomplete API的最佳做法

    在React上使用Google Place Autocomplete API的最佳做法 在没有第三方库的情况下使用Google Place Autocomplete 自动完成功能是Maps JavaScript API中地方信息库的功能。 当用户开始输入地址时,自动完成功能将填写...

    仿google,百度的下拉框提示(无刷新)

    标题中的"仿google,百度的下拉框提示(无刷新)"是指实现一个类似于谷歌和百度搜索引擎的自动完成功能,即在用户输入关键词时,无需刷新页面就能在下拉框中显示相关的搜索建议。这种功能提高了用户体验,减少了用户...

    实现像google那样自动提示的下拉框源码

    在本文中,我们将深入探讨如何实现一个类似于Google搜索中的自动提示(Autocomplete)功能。该功能能够根据用户输入的部分字符提供相关的建议列表,极大地提升了用户体验和搜索效率。 #### 核心概念与原理 1. **...

    JQuery autocomplete 使用手册

    在实现上,通常autocomplete是作为Web应用的一部分,可应用于搜索栏、表单填充、标签选择等场景。开发者可以基于这些知识点根据具体需求,对autocomplete的功能进行调整和定制,从而达到理想的应用效果。

    仿google、baidu下拉(两种方法实现、自己选择)

    无论是使用纯JavaScript和AJAX,还是借助jQuery和Autocomplete插件,实现下拉补全的核心原理都是相似的:监听用户输入,向服务器发送请求,接收返回的建议数据,然后在前端动态渲染出下拉列表。选择哪种方法主要取决...

    MFC Combox自动提示输入

    在本文中,我们将探讨如何利用MFC中的CComboBox控件实现类似于百度和Google搜索的自动提示功能。在传统的MFC库中,CComboBox控件并未内置自动提示输入的功能,但通过一些技巧和自定义处理,我们可以模拟出这种效果。...

    仿GoogleSuggest自动补全的功能

    本教程将详细讲解如何实现一个仿GoogleSuggest的自动补全功能,旨在提供一个绝对实用的解决方案。 首先,理解GoogleSuggest的工作原理至关重要。它基于用户在搜索框中输入的字符,实时从服务器端获取并展示可能的...

    完全仿谷歌搜索 显示信息条数

    在IT行业中,构建一个搜索引擎是复杂且技术性强的任务,尤其是要实现类似谷歌这样的高效、用户友好的搜索体验。本文将详细解析"完全仿谷歌搜索 显示信息条数"这一主题,涵盖智能提示、自动回传、谷歌搜索效果的实现...

    vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

    同时,如果要使用关键字搜索,需要在引入的链接中添加`plugin=AMap.Autocomplete,AMap.PlaceSearch`参数,这样才能加载相应的插件。 接着,我们来看定位功能的实现。创建一个`AMap.Map`实例来初始化地图,并设置`...

    可输入下拉列表及文本框自动匹配

    可以使用各种库和框架,如jQuery UI的Autocomplete、Vue.js的Vuetify的Autocomplete组件或Angular的MatAutocomplete。 3. **Google输入匹配**: Google的输入匹配功能是这一领域的典范,它不仅实现了基本的自动...

    C++模仿GOOGLE等搜索引擎的智能提示功能(源码)

    这个项目名为"C++模仿GOOGLE等搜索引擎的智能提示功能",其目的是通过源代码实现一个类似于谷歌搜索框的自动提示系统。 首先,我们要理解“自动提示”或“自动完成”(Autocomplete)的概念。在编程领域,自动提示...

    jquery插件表

    - **jQuery Autocomplete**:Google风格的自动完成输入框。 - **jQuery Autocomplete Mod**:jQuery Autocomplete的修改版。 - **jQuery Autocomplete by AjaxDaddy**:通过Ajax获取数据的自动完成插件。 - **jQuery...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type ... 捕获释放 event....加入收藏夹 onclick="window.external.AddFavorite("http://www.google.com/", "google...

    关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    firefox 和 ie 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个...

Global site tag (gtag.js) - Google Analytics