`

Auto-Complete

阅读更多
        Auto-Complete是一个脚本代码,她的作用是使在同一个form的一个input box 和 一个select box同时工作;用法是写input box的keyup事件autoComplete (text_input, select_input, ["text"|"value"], [true|false]),即可在input box数据数据就可以修改select box的对应数据,显示对应数据,代码如下:
      
// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

// -------------------------------------------------------------------
// autoComplete (text_input, select_input, ["text"|"value"], [true|false])
// Use this function when you have a SELECT box of values and a text
// input box with a fill-in value. Often, onChange of the SELECT box
// will fill in the selected value into the text input (working like
// a Windows combo box). Using this function, typing into the text
// box will auto-select the best match in the SELECT box and do
// auto-complete in supported browsers.
// Arguments:
// field = text input field object
// select = select list object containing valid values
// property = either "text" or "value". This chooses which of the
// SELECT properties gets filled into the text box -
// the 'value' or 'text' of the selected option
// forcematch = true or false. Set to 'true' to not allow any text
// in the text box that does not match an option. Only
// supported in IE (possible future Netscape).
// -------------------------------------------------------------------
function autoComplete (field, select, property, forcematch) {
var found = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true; break;
}
}
if (found) { select.selectedIndex = i; }
else { select.selectedIndex = -1; }
if (field.createTextRange) {
if (forcematch && !found) {
field.value=field.value.substring(0,field.value.length-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";") == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[i][property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
分享到:
评论

相关推荐

    auto-complete 自动完成 智能提示 代码联想

    在编程和软件开发领域,"自动完成"(Auto-Complete)和"智能提示"(Intelligent Suggestion)是提升效率和生产力的关键特性。这些功能在编写代码时提供实时的建议,帮助开发者快速输入复杂的语法结构,减少手动输入...

    emacs配置文件包含auto-complete color-theme 等

    4. 针对特定语言的配置:为特定编程语言启用`auto-complete`,比如对于Python,可以添加 `(add-to-list 'auto-complete-mode-alist '("\\.py\\'" . python-mode))`。 接下来,我们来讨论`color-theme`。`color-...

    auto-complete.tar

    主要包含popup-el-0.5.8.tar.gz、fuzzy-el-0.3.tar.gz和auto-complete-1.5.1.tar.gz

    auto-complete-1.3.1.tar.bz2

    auto-complete 挣点分下东西。

    phpstrom Phalcon auto-complete3.4.0代码提示插件

    phpstrom Phalcon auto-complete3.4.0代码提示插件

    emacs-23.2-bin-i386 含cedet,auto-complete,doxymacs,yasnippet,cscope,ecb

    其次,Auto-Complete 是一个Emacs的智能自动补全框架。它可以根据上下文提供可能的补全选项,适用于多种编程语言,极大地提高了编码速度。用户可以通过配置自定义补全源,使其支持更多的语言或特定的库。 Doxymacs ...

    vue-auto-complete-Vue2的自动完成。 适用于对象或api调用。-Vue.js开发

    vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装,将自动完成组件添加到您的应用程序中vuejs-auto-complete Vue自动完成组件npm install vuejs-auto-complete --save使用安装,...

    auto-complete-c-headers-源码.rar

    本文将深入探讨“auto-complete-c-headers”这一开源项目,它为C语言开发者提供了强大的头文件自动补全支持。通过分析其源码,我们可以了解其实现原理,并学习如何构建类似的工具。 1. **自动完成的基本概念** 自动...

    auto-complete-clang.el

    auto-complete-clang.el

    jquery-select-auto-complete-codes.rar_Jquery的搜索框提示

    标题 "jquery-select-auto-complete-codes.rar" 涉及的是一个使用JQuery实现的自动完成功能,特别针对搜索框的交互设计。JQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在...

    auto-complete-clang, clang自动完整源 AC Clang Yasnippet !.zip

    auto-complete-clang, clang自动完整源 AC Clang Yasnippet ! 简介Clang的交流源。 结合交流。锣和Yasnippet的力量。如果你没有 Yasnippet,我建议你安装一个。 如果你不想安装 Yasnippet,你可以尝试使用 snippet....

    auto-complete-c-headers:CC ++头文件的自动完成源

    (require 'auto-complete-c-headers) (add-to-list 'ac-sources 'ac-source-c-headers)) (add-hook 'c++-mode-hook 'my:ac-c-headers-init) (add-hook 'c-mode-hook 'my:ac-c-headers-init) 客制化 请参阅achead:...

    vscode-fontawesome-auto-complete:自动完成并预览任何语言的Font Awesome图标

    字体超赞自动完成和预览 自动完成并预览任何一种语言的Font Awesome 5或4图标(请参阅)。安装产品/安装类型平台 手动.vsix文件默认用法键入“ fa- ”(不带引号)以开始自动完成图标。 如果未显示图标预览(如下面...

    auto-complete

    在IT领域,自动完成(Auto-Complete)是一种常见的功能,特别是在网页输入框或者搜索框中,它能够根据用户输入的部分文字,提供相关的建议或匹配结果,以提高用户体验和输入效率。这里的"auto-complete"指的是一个...

    auto-complete+.el

    emacs 的自动补全插件可以在写代码时自动补全

    auto_complete的实现

    在编程和软件开发中,自动补全(Auto-Complete)是一项常用且重要的功能,它极大地提高了程序员的效率,减少了输入错误。本篇文章将深入探讨自动补全的实现原理,并结合源码分析,帮助读者理解其内部工作机制。 ...

    auto-complete-nxml:在 nXML 模式下为 auto-complete.el 提供接口

    这是 Emacs 在 nXML 模式下通过 auto-complete.el 提供补全的扩展。 特征 自动开始完成 在 nXML 模式下,当您敲击开始完成默认“C-RET”的绑定键时,完成开始。 我认为这个动作在使用 Emacs 的默认界面完成时很好。...

    html-tag-auto-complete:Atom Editor插件,可自动完成带有类和ID的html标签

    html-tag-auto-complete 一个简单的atom编辑器程序包,可以自动完成带有/不带有类和id的html元素。 特征 没什么,但是确实可以做 只要您在其上执行的单词是有效的html标记(例如div , p , abbr等),就可以与任何...

    auto-complete-address

    "auto-complete-address" 是一个基于JavaScript的自动补全地址库,它主要致力于提供高效、便捷的地址搜索和建议功能,通常用于网页上的地理定位输入。这个库可能包含一系列的JavaScript文件,HTML示例,以及可能的...

    nova-text-auto-complete

    composer require gkermer/nova-text-auto-complete 用法 要添加自动完成的文本字段,请在您的Nova资源中使用Gkermer\TextAutoComplete\TextAutoComplete字段: use Gkermer \ TextAutoComplete \ ...

Global site tag (gtag.js) - Google Analytics