Heim > Artikel > Web-Frontend > 简单的文本框输入自动提示_html/css_WEB-ITnose
简单的文本框输入自动提示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:13918Durchsuche
简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项，然后显示出来。
这里没有使用到数据库，直接在PHP用数组模拟数据存储。
demo演示
原理主要是：
监听输入框的状态，当有改变的时候即刻通过ajax发送数据并取得返回值。
主要使用了jQuery封装很方便，但貌似我这个兼容性不咋地...主要提供个思路吧~
js部分：
<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){ //事件委托 $("#name").val($(event.target).text()); $(".info").empty(); }) } }); });});</script> 顺便把html部分带上，免得不知哪个是哪个
<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></head><body> <div class="wrap"> <h3>文本框文本自动提示(如输入fish jack )</h3> <form name="form" method="get" action=""> <fieldset> <label for="search"></label> <input type="text" name="name" id="name" placeholder="Input your name"> <button type="button" id="button">search</button> </fieldset> </form> <div class="info"> </div> </div>
php数据部分：
使用简单的正则匹配即可。
<?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;?>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：0.1 HTML-CSS开始_html/css_WEB-ITnoseNächster Artikel：【动态页面】（二）Java反射_html/css_WEB-ITnose