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

仿Gmail中输入多个收件人的Autocomplete组件

GmailOperaIEMobilewebkit 
阅读更多
完全对比着Gmail的那个输入框来实现功能的，赶紧抢
输入时按,或<Enter>或<Tab>即可自动完成

使用示例 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  >
<head>
	<title>waiting tip</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
	<script src="autoComplete.js"></script>
	<script>
	function bodyload(){
		var friends = ["james","john", "robert", "michael","juan"];
		var mailTo = document.getElementById("mailTo");
		var panel = document.getElementById("friendlist");
		var autoInput = new AutoInput(mailTo,panel,friends);
	}
	window.onload = bodyload;
	</script>
<body>
<input id="mailTo" type="text" style="width:300px" />
<select id="friendlist" multiple="true" style="width:300px;display:none;" ></select>
</body>
</html>

运行效果

源码 
/**
 * 输入自动完成,类GMail中发送到输入框
 * @param {HTML Element} inputControl
 * @param {HTML Element} displayPanel
 * @param {Array} queryData
 */

function AutoInput(inputControl,displayPanel,queryData){
    var Browser = {
        IE:     !!(window.attachEvent && !window.opera),
        Opera:  !!window.opera,
        WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
        Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
        MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
    }
    
    var stopEvent = function(event){
        if(Browser.IE){
            try{
                event.cancelBubble = true;
                event.returnValue = false;
            }
            catch(e){
                alert(e);
            }
        }else{
            try{
                event.preventDefault();
                event.stopPropagation(); 
            }
            catch(e){
                alert(e);
            }
        }
    }
	
    var strip = function(string) {
    	return string.replace(/^\s+/, '').replace(/\s+$/, '');
    }	
    
    var inputControl = inputControl; //输入控件(input text或text area)
    var displayPanel = displayPanel; //结果显示面板
    var data = queryData; //搜索数据源 
	
    var results = []; //搜索结果
    var lastSearchText = ""; //最后一次搜索的关键字
	
    var isLastPosition = function(){
        return true;
    }
	
    //是否存在搜索结果
    var hasResults = function (){
        return results.length > 0
    }
	
    //自动完成单词
    var autoComplete = function(){
        var _value = inputControl.value;
        var _searchText = _value;
        var _lastPos = _value.lastIndexOf(',');
        if(_lastPos!=-1){			
            inputControl.value = _value.substr(0, _lastPos + 1) + '"' +  getSelectedText() +  '"' +',';
        }else{
            inputControl.value = '"'+getSelectedText() + '"' + ',';
        }
        clearResults();
        inputControl.focus();
    }
	
    //使输入框得到焦点（在结果显示面板中键入字符时发生）
    var focusInputControl = function(keycode){
        var _char = String.fromCharCode(keycode).toLowerCase();
        inputControl.value += _char;
        clearResults();
        inputControl.focus();
    }	
	
    //获取选中的文本
    var getSelectedText = function (){
        return	displayPanel.options[displayPanel.selectedIndex].text;
    }
	
    //搜索数组--!!!在这里改搜索算法
    var searchArray = function(searchData,searchText){
        var _results = [];
        for(var i=0,l=searchData.length;i<l;i++){
            var regExp = new RegExp("^"+searchText,"i"); //i选项,忽略大小写
            if(searchData[i].match(regExp)){
                _results.push(searchData[i]);
            }
        }
        return _results;
    }	
	
    //获取要作为搜索关键字的部分
    var getSearchText = function(){
        var _value = inputControl.value;
        var _searchText = _value;
        var _pos = _value.lastIndexOf(',');
        if(_pos!=-1){
            _searchText = _value.substr(_pos+1);
        }
        return _searchText;
    }
	
    //搜索并处理结果
    var search = function (){
        //获取搜索关键字
        var _keyword = getSearchText();	
        if(strip(_keyword)==""){
            clearResults();
            return;
        }
		
        //搜索	
        if(hasResults() && _keyword.indexOf(lastSearchText)==0){
            results = searchArray(results,_keyword);
        }else{
            results = searchArray(data,_keyword);
        }
		
        lastSearchText = _keyword;
		
        //处理搜索结果
        if (hasResults()) {
            showResult(results);
        }
        else{
            clearResults();
        }
    }
    
    //获取某个html元素的绝对位置
    var GetAbsoluteLocation = function (element)
    {
        if ( arguments.length != 1 || element == null )
        {
            return null;
        }
        var offsetTop = element.offsetTop;
        var offsetLeft = element.offsetLeft;
        var offsetWidth = element.offsetWidth;
        var offsetHeight = element.offsetHeight;
        while( element = element.offsetParent )
        {
            offsetTop += element.offsetTop;
            offsetLeft += element.offsetLeft;
        }
        return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
            offsetWidth: offsetWidth, offsetHeight: offsetHeight };
    }
	
    //重设结果显示面板的位置
    var resetPositoin = function(){
        var position = GetAbsoluteLocation(inputControl);
        displayPanel.style.position = "absolute";
        displayPanel.style.top = position.absoluteTop + position.offsetHeight + 5 + 'px';
        displayPanel.style.left = position.absoluteLeft + 'px';		
    }
	
    //显示搜索结果,清空结果面板
    if (Browser.IE) {
        var showResult = function(searchResults){
            clearOptions();
            for (var i = 0; i < searchResults.length; i++) {
                var text = searchResults[i];
                displayPanel.options.add(new Option(text, text));
            }
            resetPositoin();
            displayPanel.style.display = "block";
            displayPanel.options[0].selected = true;
        }
        
        var clearOptions = function(){
            for(var i=0,l=displayPanel.options.length;i<l;i++){
                displayPanel.options.remove(0);
            }
        }

    }
    else {
        var showResult = function(searchResults){
            var _htmls = "<option>" + searchResults.join("</option><option>") + "</option>";
            displayPanel.innerHTML = _htmls;
            resetPositoin();
            displayPanel.style.display = "block";
            displayPanel.options[0].selected = true;
        }
        
        var clearOptions = function(){
            displayPanel.innerHTML = "";
        }
    }
	
    var clearResults = function(){
        clearOptions();
        displayPanel.style.display = "none";
        results = [];
    }	
	
    //处理显示面板keydown
    if (Browser.Opera) {
        var resultsPanel_keydown = function(event){
            if (!hasResults()) 
                return;
            var displayPanel = event.srcElement;
            var _key = event.keyCode;
            if (_key == 188 || _key == 13 || _key == 9) { // , enter tab
                autoComplete();
                stopEvent(event);
            }
            else 
                if (_key == 38) { //up
                    var index = displayPanel.selectedIndex + 0;
                    var newIndex = index - 1;
                    if (index > 0) {
                        displayPanel.options[index].selected = false;
                        displayPanel.options[newIndex].selected = true;
                    }
            }
            else 
                if (_key == 40) { //down
                    var index = displayPanel.selectedIndex + 0;
                    if (index < displayPanel.options.length - 1) {
                        var newIndex = index + 1;
                        displayPanel.options[index].selected = false;
                        displayPanel.options[newIndex].selected = true;
                    }
            }
            else {
                focusInputControl(_key);
            }
        }
    }
    else {
        var resultsPanel_keydown = function(event){
            if (!hasResults()) 
                return;
            var _key = event.keyCode;
            if (_key == 188 || _key == 13 || _key == 9) { // , enter tab
                autoComplete();
                stopEvent(event);
            }
            else 
                if (_key != 38 && _key != 40) {
                    focusInputControl(_key);
                }
        }
    }

    //处理显示面板按下tab键
    function resultsPanel_tabdown(event){
        var _key = event.keyCode;
        if (_key == 9) { //tab
            autoComplete();
            stopEvent(event); //opera未能停止事件
        }
    }
    
	//处理输入控件按下tab键
    function inputControl_tabdown(event){
        var _key = event.keyCode;
        if (_key == 9) { //tab
            if(hasResults()){
              autoComplete();
              stopEvent(event); //opera未能停止事件
            }
        }
    }    
	
    //处理输入控件keydown
    function inputControl_keydown(event){
        if(!isLastPosition())return
        var _key = event.keyCode;
        if(_key==188 || _key==13){ // 按下: 1:, 2:enter 时自动完成
            if (hasResults()) {
                stopEvent(event);
                if(_key==188){
                    var _value = inputControl.value;
                    inputControl.value = _value.substr(0,_value.length-1);
                }
                autoComplete();
            }
        }
        else if(_key==40) // 按下: down(向下箭头)时聚焦到面板显示框,如果存在搜索结果的话
        {
            if (hasResults()) {
                displayPanel.focus();
                if(displayPanel.options[1]){
                    displayPanel.options[0].selected = false;
                    displayPanel.options[1].selected = true;
                }
                stopEvent(event);
            }
        }
        else{ //按下: 其他键		
            search();
        }
    }	
	
    //绑定事件
    var addEventListener = function(element, type, handler,stopEvent){
        if (element.addEventListener) {
            if (stopEvent) {
                element.addEventListener(type, handler, true);
            }else{
                element.addEventListener(type, handler, false);
            }
        }
        else { //ie
            if (stopEvent) {
                element.attachEvent("on" + type, function(event){
                    handler(event);
                    event.cancelBubble = true;
                });
            }else{
                element.attachEvent("on" + type, handler);
            }
        }
    }
	
	
    addEventListener(inputControl, "keyup", inputControl_keydown);
    addEventListener(inputControl, "keydown", inputControl_tabdown);
    addEventListener(displayPanel, "keyup", resultsPanel_keydown);
    addEventListener(displayPanel, "click", autoComplete);	
    addEventListener(displayPanel, "keydown", resultsPanel_tabdown);
}

  • 大小: 7.7 KB
分享到：
| js等待提示通用类
评论
1 楼 q471989525 2014-06-25  
  很不错～ 多谢分享
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery仿收件人效果autocomplete

    总的来说，实现“Jquery仿收件人效果autocomplete”涉及前端UI设计、jQuery事件绑定、AJAX数据交互等多个方面，通过合理的代码组织和样式配置，可以创建出高效且用户友好的输入体验。在实际开发中，还需要考虑性能...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    ### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...

    vant的field组件（autocomplete）

    在Vant的组件体系中，`Field`组件主要用于表单输入，而`Autocomplete`则是用于实现自动完成功能的组件。在本案例中，我们将探讨如何将`Field`组件与自动完成功能相结合。 1. **Vant Field组件** Vant的`Field`组件...

    vue2autocomplete一个Vue2的文本输入自动完成组件

    Vue2Autocomplete是针对Vue 2框架设计的一个高效、可定制化的文本输入自动完成组件。这个组件主要用于提高用户在输入时的效率，通过提供实时的建议列表，帮助用户快速找到并选择所需的内容。Vue.js是一个轻量级但...

    jquery仿邮箱收件人

    本教程将详细讲解如何使用jQuery实现一个仿QQ邮箱的收件人输入框功能，该功能允许用户在输入时动态搜索并选择收件人。 首先，我们了解核心知识点： 1. **jQuery基础**：jQuery通过简洁的API让JavaScript编程变得...

    flex拓展组件autoComplete开源代码

    本篇文章将深入探讨Flex扩展组件中的`autoComplete`，这是一种非常实用的功能，可以为用户提供自动补全输入的便捷体验。 `autoComplete`组件是基于用户在文本输入框（Input）中键入内容时，自动显示匹配选项的组件...

    JQ多个autocomplete 自动完成 实例

    在“JQ多个autocomplete 自动完成 实例”中，你将找到一系列示例代码，这些示例展示了如何在不同的场景下应用`autocomplete`功能。这些实例可以帮助你了解如何根据项目需求定制`autocomplete`的行为，包括但不限于...

    jquery仿qq邮箱收件人

    【标题】"jquery仿qq邮箱收件人"指的是使用jQuery库来实现类似QQ邮箱中收件人输入框的功能。在QQ邮箱中，当你在撰写邮件时，收件人输入框会提供自动补全、多选收件人以及保存常用联系人的功能。这个项目可能旨在帮助...

    仿百度、Google搜索效果 AutoComplete

    总之，仿百度、Google搜索效果的AutoComplete是前端开发中的一个重要组件，它结合了JavaScript、Ajax、数据库查询以及用户体验设计等多种技术，目的是提高用户在搜索场景下的操作效率和满意度。通过使用像`jquery-...

    vautocomplete一个Vuejs的输入自动完成组件

    `v-autocomplete` 是一个专门为 Vue.js 设计的输入自动完成组件，它提供了一个简洁且可定制化的解决方案，用于在用户输入时动态显示匹配项。这个组件通常用于搜索框、表单和其他需要实时建议的场景，极大地提高了...

    可输入的下拉框（autoComplete）

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

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

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

    jQuery UI Autocomplete是jQuery UI的自动完成组件

    在lwme-jqueryui-demo这个压缩包中，可能包含了多个示例文件，它们展示了Autocomplete的不同用法和配置，可以帮助开发者更好地理解和运用这个组件。通过学习这些示例，你可以掌握如何根据项目需求灵活定制...

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

    首先，jQuery Autocomplete是jQuery UI库中的一个组件，它能够根据用户在输入框中输入的内容，动态地从服务器或本地数据源获取匹配项，并以列表形式展示出来。这个功能对于提升用户体验，特别是处理大量数据的搜索...

    layui自动填充插件autocomplete.rar

    在layui中，"autocomplete"是一款自动填充插件，常用于输入框，提供智能提示功能，提高用户输入效率。这款插件适用于各种需要自动补全场景，如搜索框、表单填写等。 在layui的autocomplete插件中，主要涉及以下知识...

    自动补全autoComplete控件demo

    在IT行业中，自动补全（AutoComplete）控件是一种常见的用户界面组件，广泛应用于各种文本输入场景，如搜索引擎、编程IDE、电子邮件客户端等。它提高了用户输入效率，减少了错误，并提供了友好的用户体验。本示例将...

    jQuery UI Autocomplete 1.8.16 中文输入修正代码

    Autocomplete组件允许用户快速找到并选择输入框中的某个选项，当用户开始键入时，组件会根据用户已经输入的内容来过滤匹配的选项，并将这些选项列表显示出来。jQuery UI Autocomplete广泛应用于各种网站和应用程序中...

    jquery autocomplete实现框输入提示

    jQuery Autocomplete 是一个强大的组件，广泛应用于网页上的输入框，可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信（通常使用 AJAX 技术）来获取数据源，并在用户输入时动态...

    基于autocomplete的@联系人效果

    "基于autocomplete的@联系人效果"是这个话题的核心，它模仿了微博中@联系人时出现的智能推荐功能。这种功能允许用户在输入时快速找到并选择目标联系人，而无需手动输入完整的名字。 在实现这个功能时，通常会使用...

    autocomplete

    标题中的"autocomplete"指的是自动补全功能，常见于各种输入框中，如搜索引擎、文本编辑器等，当用户输入文字时，系统会根据已输入的部分预测并显示可能的完整词汇或短语，提高输入效率。这个功能在网页开发中经常...

Magicbox
Global site tag (gtag.js) - Google Analytics