Use JavaScript implementation to click the Input box pop-up form selection information

Source: Internet
Author: User
Tags bool eval json

  This article is mainly on the use of JavaScript implementation click the Input box pop-up form to select information into the example row of detailed introduction, the need for friends can come to the reference, I hope to help everyone else

Here in the source code, did not do style processing, but the function is OK, I hope you can communicate with me!   Code as follows: <html>  <head>   <title> Click Popup div Select information </title>      < Meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >      <meta http-equiv= " Description "content=" This is the My page ">      <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 ">  </head>    <body>   <input type=" text "onfocus=" Alertdivinfo ( This, ' id ', ' name ', True, true, Arrs, '/>   <div style= ' Position:absolute; ></div>  </body> </html>   <script type= "Text/javascript" >    //Array information & Nbsp;var Arrs = new Array ();  arrs.push ({id: "1", Name: "Zhang 33"});  arrs.push ({ID: "2", Name: "Li 43"});  arrs.push ({ID: "3", Name: "Shen 3"});  arrs.push ({ID: "4", Name: "Zhou 3"});  arrs.push ({ID: "5", Name: "Shao is 3"});  arrs.push ({ID: "6", Name: "Harry"});  arrs.push ({ID:"7", Name: "Treasure 3"});  /**  * obj: Click on the Text box object  * idstr:json array ID key name  * namestr:json Array's name Key name  * bool:  true: Indicates append f Alse: Values for  * BoolSet:true:ID and name are displayed as false: Displays only the value of name  * widthnum: The width of the information div  * heightnum: The height of the information div &NB sp;* arrname: Array name  */function alertdivinfo (obj, idstr, NAMESTR, bool, Boolset, Widthnum, Heightnum, arrname) {&nbsp ; Obj.blur ();  if (!widthnum) {  widthnum =  }  if (!heightnum) {  Heightnum =    //;} Create a large div  var alertdivparent = document.createelement ("div");  alertdivparent.id = "Alertdivparent";  with (Alertdivparent.style) {  top = 0;   left = 0;   Position = "absolute";   background = "#EEE EEE ";   Filter  = "alpha (opacity=70)";   opacity = 0.7;   Width  = math.max (document.body.clientWidth, document.body.scrollWidth);   Height  = math.max (document.body.clientHeight, document.body.scrollHeight);  }  d Ocument.body.appendChild (alertdivparent);  //Create small div  var alertdiv = document.createelement ("div");  alertdiv.id = "AlertDiv";  with (Alertdiv.style) {  width = widthnum   height = heightnum;   position = "absolute";   BACKG Round = "#DDDDDD";   Left  = (Math.max (Document.body.clientWidth, Document.body.scrollWidth)-widthnum)/2;   Top  = (Math.max (Document.body.clientHeight, Document.body.scrollHeight)-heightnum)/2; &NBSP}  //Add to form  document.body.appendchild (ALERTDIV);    //Create a search for div  var alertquerydiv = document.createelement ("div");  alertquerydiv.id = "Alertquerydiv";  //adds the search div to the information Div     alertdiv.appendchild (ALERTQUERYDIV);       alertquerydiv.innerhtml = "Search   name:";      //Create text box     var alertqueryinput = document.createelement ("input");     alertqueryinput.id = "Alertqueryinput";     Alertqueryinput.tyPE = "text";    //Add text box to search div     alertquerydiv.appendchild (alertqueryinput);      //Create Search button     var Alertquerybutton = document.createelement ("input");  alertquerybutton.id = "Alertquerybutton";     Alertquerybutton.type = "button";     Alertquerybutton.value = "search";    /Add events to the button     Alertquerybutton.onclick = function () { //calculate how much of the width can be put in the cell   var tdwidthnum = 130;   var tdnum = parseint (widthnum/tdwidthnum);      var num = 0;      var j = 0;      //Get the table that displays the information   var alertinfotab = document.getElementById ("Alertinfotab");  //emptying of thead information   alertinfotab.deletethead ();      //Loop array   for (var i = 0; i < eval (arrname). length; i + +) {   //add to table if equal to the array &nb Sp     if (eval (arrname + [i]. "+ nameStr). IndexOf (Alertqueryinput.value) >= 0) {    VAR header; &nbsp ; &nbsP if (j% Tdnum = = 0) {     header = Alertinfotab.createthead ();      header = Header.insertrow (num);      num + +;    }     J + +;     var headername = Header.insertcell (-1);     with (Headername.style) {     width = tdwidthnum      color = "Blue";   & nbsp  cursor = "pointer";    }     if (boolset)      headername.appendchild document.createTextNode (eval ( Arrname + "[i]." + idstr) + ":" + eval (arrname + "[i]." + nameStr)));     ELSE if (!boolset)      headername.appendchild (document.createTextNode (eval (arrname + "[i]) . "+ nameStr)");     Headername.onclick = function () {     if (BOOL)       Obj.value = Obj.value + t His.innerhtml + ";";      else if (!bool)       Obj.value = this.innerhtml;      //Remove pop-up form      d Ocument.body.removeChild (ALERTDIV);      document.body.removechild (alertdivparent);    };   &NBSP      }    };    //Add button to search div     alertquerydiv.appendchild (Alertquerybutton);      //Create empty button     var Alertclearbutton = document.createelement ("input");  alertclearbutton.id = "Alertclearbutton";     Alertclearbutton.type = "button";     Alertclearbutton.value = "Empty";     Alertclearbutton.onclick = function () {     //give text box null value      obj.value = "";  //Remove pop-up form   document.body.removeChild (ALERTDIV);   Document.body.removeChild (alertdivparent);    };    //Add button to search div     alertquerydiv.appendchild (Alertclearbutton);      //Create Close button     var Alertcancelbutton = document.createelement ("input");  alertcancelbutton.id = "Alertcancelbutton";   &NBSp Alertcancelbutton.type = "button";     Alertcancelbutton.value = "close";     Alertcancelbutton.onclick = function () { //Remove pop-up form   document.body.removeChild (ALERTDIV);   Document.body.removeChild (alertdivparent);    };    //Add button to search div     alertquerydiv.appendchild (Alertcancelbutton);    //CREATE table  var alertinfotab = document.createelement ("table") to display information;  alertinfotab.id = "Alertinfotab";  with (alertinfotab.style) {  margin =  }    //calculates how many cells the width can be placed  var tdwidthnum = 130;  var tdnum = parseint (widthnum/tdwidthnum);     var num = 0;  for (var i = 0; i < eval (arrname). Length i + +) {  var header;   If (i% Tdnum = 0) {   header = Alertinfotab.createthead ();    header = Header.insertrow (num);    num + +;  }   var headername = Header.insertcell (-1);   with (Headername.style) {   WIDTH = Tdwidthnum;    color = "Blue";    cursor = "pointer";  }  //var Headertype = Header.insertcell (-1);   if (boolset)    headername.appendchild (document.createTextNode (eval (arrname + "[i]." + idstr) + ":" + Eva L (arrname + "[i]." + nameStr));   Else if (!boolset)    headername.appendchild (document.createTextNode (eval (arrname + "[i]." + nameStr)) );  //headertype.appendchild (document.createTextNode ("Type"));     Headername.onclick = function () {   IF (bool)     Obj.value = Obj.value + this.innerhtml + ";";    else if (!bool)     obj.value = this.innerhtml;    //removes the pop-up form    document.body.removechild (ALERTDIV);    document.body.removechild (alertdivparent);  }; &NBSP}  //Add table to div     Alertdiv.appendchild (Alertinfotab) that displays information; } </script>    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.