输入框提示

天锦 发表于 某的代码片段 分类，标签:
22 08月 2018
0

能够实现像百度的搜索框一样输入字符，AJAX传给后台查询，将相关数据以下拉列表展示出来

作者@Jamie McConnell, jamie@blue44.com.

前端html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script>
function add(thisValue){
var trObj=document.createElement("tr");
trObj.id=new Date().getTime();
trObj.innerHTML="<td><input name='key_name'/></td>"+thisValue+"<td><input name='key_value'/></td><td><input type='button'value='删除' onclick='del(this)'></td>";
document.getElementById("tb").appendChild(trObj);
}
function del(obj){
var trId=obj.parentNode.parentNode.id;
var trObj=document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
</script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
//$('#inputString').val('');
 if(thisValue[0].length>0)
 {
 add(thisValue[1]);
 $('#inputString').val('');
 }
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 18px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: absolute;
left: 10px;
margin: 0px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
</form>
<table>
<thead>
<tr>
<td width="80px">用户</td>
<td >权限</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
</body>
</html>


php程序

<?php
// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', '2test' ,'5jLTe2sjnYxGEDWx', '2test');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
// Run the query: We use LIKE '$queryString%'
// The percentage sign is a wild-card, in my example of countries it works like this...
// $queryString = 'Uni';
// Returned data = 'United States, United Kindom';
// YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
// eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
$query = $db->query("SELECT * FROM `countries` WHERE `value` LIKE '$queryString%' LIMIT 10");
if($query) {
// While there are results loop through them - fetching an Object (i like PHP5 btw!).
while ($result = $query ->fetch_object()) {
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.
// YOU MUST CHANGE: $result->value to $result->your_colum
         echo '<li onClick="fill(Array(\'1\',\'技术部\',\''.$result->value.'\'));">'.$result->value.'</li>';
         }
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>

Auto Completer - V1.0 (19/09/2007).

Jamie McConnell, jamie@blue44.com.


Please visit Nodstrum.com for any information relating to this script.

Nodstrum and/or Jamie McConnell cannot be held responsible for any problems that arise after installing or using this script.


MIT License.


项目文件

auto.zip


0 篇评论

发表我的评论