寻求一个实现方法:
就是在检索框内输入“a”的时候,会显示所有含有“a”的结果,当我输入“ab”的时候,会显示所有“ab”的结果,随着输入的信息越多,显示的检索结果越精确!
就是在检索框内输入“a”的时候,会显示所有含有“a”的结果,当我输入“ab”的时候,会显示所有“ab”的结果,随着输入的信息越多,显示的检索结果越精确!
解决方案 »
- 求:自动拼图软件---拼接被切割成若干tile的图片~~~~~~~~~~
- Artisteer+CMS VS PHP+DW?
- 阻止客户端在文本框输入其它数据的字串符用JS好还是用PHP好
- PHP 急问题?????????
- 如何用程序判断mysql表中某字段是int还是tinyint类型
- 表单传值,我怎么做哪里错了?
- 请问大家在linux下都是用什么来编辑网页呀?有没有象frongPage这样的软件?
- 欢迎到我的网站下载好东西!
- 怎样在多处数据库连接时安全的从一个来源得到用户名和密码?
- 请问Editplus到底有何方便之处,请说具体的,100分.
- 上传文件代码怎么写?
- 用phpstudy平台建了一个站,却不能访问?
select * from table where Field like '%a%' --模糊查找,无索引查询
select * from table where Field like 'a%' --右模糊,索引查询
select * from table where Field like '%a' --左模糊,无索引查询
其实我就是想要时时刷新
该是使用的全文搜索select * from table where match('title') against("a");。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
cursor:default;
}
.mouseout {
color:#000000;
background-color:#ffffff;
cursor:default;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function jsAuto(instaceName,objID)
{
this._msg = [];
this._o = document.getElementById( objID );
if (!this._o) return;
this._f = null;
this._i = instaceName;
this._r = null;
this._v = null;
this._o.style.visibility = "hidden";
this._o.style.lineHeight = "120%";
this._o.style.position = "absolute";
this._o.style.zIndex = "9999";
return this;
};
// mouseEvent.
jsAuto.prototype.domouseover=function(obj)
{
obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
};
jsAuto.prototype.domouseout=function(obj)
{
obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
};
jsAuto.prototype.doclick=function(msg) { with (this)
{
if(_r)
{
_r.value = msg;
_o.style.visibility = "hidden";
}
else
{
alert("javascript autocomplete ERROR :\n\n can not get return object.");
return;
}
}};
// object method;
jsAuto.prototype.item=function(msg)
{
if( msg.indexOf(",")>0 )
{
var arrMsg=msg.split(",");
for(var i=0; i<arrMsg.length; i++)
{
arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
}
}
else
{
this._msg.push(msg);
}
this._msg.sort();
};
jsAuto.prototype.append=function(msg) { with (this)
{
_i ? "" : _i = eval(_i);
var div = document.createElement("DIV");
//bind event to object.
div.onmouseover = function(){_i.domouseover(this)};
div.onmouseout = function(){_i.domouseout(this)};
div.onclick = function(){_i.doclick(msg)};
var re = new RegExp("(" + _v + ")","i");
div.className = "mouseout";
if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
div.style.fontFamily = "verdana";
_o.appendChild(div);
}};
jsAuto.prototype.display=function() { with(this)
{
if(_f)
{
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visible";
}
else
{
_o.style.visibility="hidden";
}
}};
jsAuto.prototype.handleEvent=function(fValue,fID) { with (this)
{
var re;
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");
if( fValue=="" ) return;
_o.innerHTML="";
for(var i=0; i<_msg.length; i++)
{
if(re.test(_msg[i]))
{
_i.append(_msg[i]);
_f = true;
}
}
_i ? _i.display() : alert("can not get instance");
}};
window.onerror=new Function("return true;");
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="divc">
<!--this is the autocomplete container.-->
</div>
<h1>Autocomplete Function</h1>
<div align="center">
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto')" id="auto">
</div>
<div id="divf">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
</SCRIPT>
</BODY>
</HTML>
PHP JavaScript 搜索自动提示
JavaScript代码:
<script src="jquery-1.2.1.pack.js" type="text/javascript" charset="utf-8"></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);}
else {
$('#suggestions').hide();}
});
}
} // lookup function fill(thisValue) {
$('#inputString').val(thisValue);
$('#suggestions').hide();
} </script> 好,从上面的代码看到,我们需要连接到一个叫做rpc.php的文件,这个文件处理所有的操作。 lookup函数使用从文本输入框中得到的单词然后使用jQuery中Ajax的方法POST把它传给rpc.php。 如果输入字符 ‘inputString’是‘0’(Zero,译注:在这里是指在搜索框中没输入任何内容),建议框就被隐藏,这也很人性化,你想,如果在搜索框中没有输入任何东西,你也不期望会出现个建议提示框。 如果输入框中有内容,我们就得到了这个 ‘inputString’并传递给rpc.php页面,然后jQuery 的$.post()函数被使用,如下: $.post(url, [data], [callback])
‘callback’部分可以关联一个函数,这个比较有意思,只有在数据(data)被加载成功的时候才会执行(译注:此处为意译,没看懂原文:<). 如果返回的数据(data)不为空(也就是说,有东西要显示),那就显示搜索提示框并且使用返回的数据(data)来代替其中的html代码。 如果为空就不隐藏建议框。就这么简单!
PHP后台程序(rpc.php):<?php
$db = mysql_connect("127.0.0.1:3307", "root","123");
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 = $_POST['queryString'];
$length=strlen($queryString);
$sql="SELECT title FROM groups WHERE title LIKE '$queryString%' LIMIT 10";
mysql_select_db("qq",$db);
$result = mysql_query("set names utf8"); // Is the string length greater than 0?
if($length>0) {
$query = mysql_query($sql);
// Run the query: We use LIKE ‘$queryString%’
if($query) {
while ($myrow = mysql_fetch_array($query)) {
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.
echo '<li onclick="fill(\''.$myrow[0].'\');">'.$myrow[0].'</li>';
}
} else {
echo "ERROR: There was a problem with the query $sql.";
}
} else {
}
} else {
echo 'There should be no direct access to this script!';
}
}
?>CSS样式:
<style type="text/css">
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 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>主文件HTML:
<div>
<input type="text" name="searchvalue" size="30" value="<?php echo $searchvalue ?>" id="inputString" oninput="lookup(this.value);"onkeyup="lookup(this.value);">
<input type="Submit" name="search" value="搜索">
</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"> </div></div>
对于oninput和onkeyup事件,参考http://www.hansir.cn/blog/2008/20080613-25.html
在开启输入法的情况下
IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。 Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。