JavaScript Custom Auto_complete

Ys_auto_complete.css

. ys-auto-complete{Position:absolute;    Display:none;    List-style-type:none;    padding:0;    border:1px solid #ccc;    margin:0;    Background-color: #fff; z-index:999;}.    Ys-auto-complete li{height:32px;    line-height:32px;    font-size:14px;    Color: #222; padding-left:10px;}.    Ys-auto-complete li:hover{Background-color: #eaeaea; Cursor:pointer;}

ys_auto_complete.js

(function ($) {    var defaultsettings = {         loadsource:function (Keyword,callback) { //             //var data = [];             //callback (This,data);        }     };    function refreshautocomplete (target,list) {         if (list==null| | list.length==0) {            return;         }        var ys_auto_complete _id = $ (target) attr ("Ys_auto_complete");        var  container = $ ("#" +ys_auto_complete_id);         var html =  "";         // render the data         list.foreach (function (item) {             var name = item.name;             var value = item.value;             html += "<li value=" "+value+" > "+name+" </li> ";         });         container.html (HTML);        //  calculate auto_complete  coordinates location          var top = $ (target). Offset (). top+$ (target). Outerheight () +1;        var left = $ (target). Offset (). Left;      &nbSp; container.css ({             "left": left+ " PX ",            " top ": top+" px "         });         var ys_auto_complete_id  = $ (target) attr ("Ys_auto_complete");         $ ("#" +ys_auto_ COMPLETE_ID). Show ();    }    var renderhtml =      "<ul class= ' Ys-auto-complete ' ></ul>";    function  Renderautocomplete (target,settings) {        var id =  " Ys_auto_complete_ "+new date (). GetTime () +" "+parseint (Math.random () *10000);         $ (target) attr ("Ys_auto_complete", id);         $ ( renderhtml). attr ("id", id). AppENdto ("HTML"); //  added to the document         var container =  $ ("#" +id);         var width = $ (target). Outerwidth ();         container.css ({              "width": width+ "px" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;}) ;        return container;    }     function bindeventhandlers (target,container,settings) {         var timeout = null;        var  loadsource = settings.loadsource;        //  The Target Input box keyboard KeyPress event         $ (target). On ("KeyDown", Function (e) {              e.stoppropagation ();             Cleartimeout (timeout);             console.log ("--- ----------------------");            timeout  = settimeout (function () {                // load the data from backend                 var keyword = $ (target). Val ();                 loadsource.call ( Target,keyword,refreshautocomplete);             },         });         //   Tap blank area   Hide  auto_complete        $ (document). On ("click", Function (e) {             e.preventdefault ();             $ (". Ys-auto-complete"). Hide ();        &NBSP});        //  Click the input box  auto_complete  do not hide          $ (target). On ("click", Function (e) {             e.stoppropagation ();             e.preventdefault ();         });         // auto_complete item click  Events          $ (Container). On ("Click", "Li", function (e) {             e.stOppropagation ();             e.preventdefault ();             var value = $ (This). attr ("value");             var name =  $ (this). HTML ("name");             $ (target). Val (value);             $ (container). Hide ();         });     }    var options  = {        ysautocomplete:function (Settings)  {             var mergedSettings = {};             $.extend (MergedSettings, defaultsettings,settings);              $ (this). each (function () {                 var container =  Renderautocomplete (this,mergedsettings);                 bindeventhandlers (this,container,mergedsettings);             });        }     };    $.fn.extend (options);}) (JQuery);

ys_auto_complete_demo.html

<! Doctype html>
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M01/80/48/wKiom1c9Ivygb1pwAAET2DL_a4Y512.jpg "title=" auto_ Complte.jpg "alt=" Wkiom1c9ivygb1pwaaet2dl_a4y512.jpg "/>
JavaScript Custom Auto_complete