Simple text box input prompt, text box input

Simple text box input prompt, text box input

Enter an automatic prompt in a simple text box. When you enter the prompt, the matching items in the database can be loaded asynchronously and displayed.

Databases are not used here, and PHP directly simulates data storage with arrays.

Demo

 

The principles are as follows:

Listen to the status of the input box. When there is a change, immediately send data through ajax and get the returned value.

 

It is very convenient to use jQuery encapsulation, but it seems that my compatibility is not very good... it mainly provides a train of thought ~

Js section:

<Script type = "text/javascript" src = ". /js/jquery. min. js "> </script> <script type =" text/javascript "> $ (function () {$ (": button "). click (function () {/* Act on the event */if ($ (": input "). val ()! = "") {Alert ("your name is" + $ (": input "). val () ;}}); $ (": input "). bind ("keyup", function () {$ (". info "). empty (); if ($ (this ). val () = "") return; // alert ($ ("# name "). val (); $. ajax ({type: 'get', url: 'automatic _ prompt_info.php ', data: {name: $ ("# name "). val ()}, success: function (data) {// alert (data); var array = new Array (); array = data. split (","); $ (". info "). append ($ ("<ul> </ul>"); for (var I = 0; I <array. length-1; I ++) {$ (". info ul "). append ($ ("<li>" + array [I] + "</li>");} $ (". info ul "). on ("click", function (event) {// event Delegate $ ("# name" ).val((event.tar get ). text (); $ (". info "). empty () ;}}}) ;}}) ;}); </script>

By the way, add the html part so that you do not know which one is

<Style type = "text/css"> html, body, div, form, input, legend, label, button, ul, li {margin: 0; padding: 0 ;} form, fieldset {border: 0 ;}. wrap {position: relative; margin: 100px auto; width: 700px; height: 400px; overflow: hidden;} input {width: 300px; height: 36px; border: 3px solid green; border-radius: 3px; font-weight: bold;} button {width: 120px; height: 42px; border: 0; padding: 8px; margin-left:-10px; background-color: green; font-weight: bold; font-size: 16px; color: white; cursor: pointer; border-radius: 30px ;}. info {position: relative; top:-10px; left: 14px; width: 305px;} ul {list-style: none;} li {padding: 3px 10px; border-bottom: 1px dotted #333; background-color: # ddd;} li: hover {cursor: pointer; background-color: green ;} </style> 
 
 
Php Data:
Use simple regular expression matching.
<?php$names = array('adan','acos','acoss','apple','fish','fisher','fishers','jack','july','boy','boyee','girl','json');  // names$name = $_GET['name'];  // name from input label$str = "";$counts = count($names);for($i = 0;$i<$counts;$i++){     if(preg_match("/^$name/", $names[$i])){    //find         $str .= $names[$i];        if($i != $counts - 1)            $str .= ",";    }}//$data = array("A"=>$str)//echo json_encode($data);     // send back infoecho $str;?>