Results 1 to 3 of 3

Thread: How to auto-complete after the @?

  1. #1
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to auto-complete after the @?

    Hi Folks,
    Im looking for an auto-complete script to complete email addresses.
    What I specifically want is the domain name of the email address to be completed.
    For instance when somebody types: myname@.... The script will complete the section after the @.
    The intricate part of this is that the autocomplete script must only apply and look at the text following the @ symbol...

    What client side script can do that?

    Regards,
    Andy

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I know this isnt exactly what youre asking for but maybe it will get you started: http://www.webdeveloper.com/forum/sh...plete-function
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    <!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" xml:lang="en" lang="en">
    
    
    <head>
      
    <title>
    </title>
    
    <style type="text/css">
    /*
    <![CDATA[*/
    .searchbox {
      position:absolute;
      overflow:auto;
      z-Index:101;
      visibility:hidden;
      width:125px;
      height:100px;
      background-Color:#CCFFFF;
      border:solid red 1px;
      cursor:pointer;
    }
    
    .searchbox DIV {
      position:relative;
      width:100px;
      height:20px;
      background-Color:#CCFFFF;
      padding-Left:5px;
      border-Bottom:solid red 1px;
    }
    
    /*]]>*/
    
    </style>
    </head>
    
    
    <body>
    
    <form>
     
    <input id="email" name="email" />
    
    </form>
    
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Complete Email. (19-January- 2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcCompleteEmail={
    
     init:function(o){
      var id=o.InputID,ary=o.Array,cls=o.ClassName,obj=document.getElementById(id),box=document.createElement('DIV'),mk=box.cloneNode(false),mk=box.cloneNode(false),a=document.createElement('A'),d,dary=[],z0=0;
      o=zxcCompleteEmail['zxc'+id]={
       obj:obj,
       box:box,
       mk:mk,
       h:obj.offsetHeight,
       ary:dary
      }
      for (;z0<ary.length;z0++){
       d=box.cloneNode(false);
       d.innerHTML=ary[z0];
       box.appendChild(d);
       dary[z0]=[d,ary[z0]];
       this.addevt(d,'mouseup','complete',o,z0);
      }
      box.className=cls;
      mk.style.height='1px';
      box.appendChild(mk);
      box.appendChild(a);
      document.body.appendChild(box);
      this.addevt(box,'mousedown','clear',o);
      this.addevt(box,'mouseover','clear',o);
      this.addevt(box,'mouseout','hide',o);
      this.addevt(obj,'keyup','keyup',o);
      this.addevt(obj,'mouseout','hide',o);
     },
    
     keyup:function(o){
      var v=o.obj.value,p=this.pos(o.obj),i=v.indexOf('@'),s;
      o.box.style.left=p[0]+'px';
      o.box.style.top=p[1]+o.h+'px';
      o.box.style.visibility=i>2?'visible':'hidden';
      s=v.substring(i+1);
      o.v='';
      if (i>0&&s){
       o.v=v.substring(i+1);
       for (var z0=0;z0<o.ary.length;z0++){
        if (o.ary[z0][1].substring(0,s.length)==v.substring(i+1)){
         o.box.insertBefore(o.ary[z0][0],o.mk);
        }
        else {
         o.box.insertBefore(o.ary[z0][0],o.mk.nextSibling);
        }
       }
      }
     },
    
     complete:function(o,nu){
      var v=o.obj.value;
      o.obj.value=o.obj.value.replace('@'+o.v,'@');
      o.obj.value+=o.ary[nu][1];
      o.box.style.visibility='hidden';
     },
    
     clear:function(o){
      clearTimeout(o.to);
     },
    
     hide:function(o){
      var oop=this;
      o.to=setTimeout(function(){ o.box.style.visibility='hidden'; },1500);
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p2); });
      }
     }
    
    
    }
    
    zxcCompleteEmail.init({
     InputID:'email',
     Array:[
      'ntlworld.com',
      'tom.com',
      '****.com',
      'harry.com',
      'hary.joe',
      'fred.com'
     ],
     ClassName:'searchbox'
    });
    
    
    /*]]>*/
    </script>
    
    
    </body>
    
    
    </html>
    Last edited by vwphillips; 01-19-2013 at 07:45 PM. Reason: added a degree of sorting
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Resolved Complete the url
    By Q Mark in forum Other
    Replies: 7
    Last Post: 05-17-2012, 12:26 AM
  2. Auto complete search box with result div
    By shas1280 in forum PHP
    Replies: 0
    Last Post: 08-28-2011, 12:15 PM
  3. auto suggest and auto complete
    By chilldude in forum JavaScript
    Replies: 1
    Last Post: 04-17-2009, 04:01 PM
  4. Disabling auto-complete in a form
    By jc_gmk in forum HTML
    Replies: 47
    Last Post: 11-04-2007, 06:15 PM
  5. Auto Complete
    By kcornwell in forum HTML
    Replies: 0
    Last Post: 11-02-2005, 02:13 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •