Resulta que en mi sitio web estaba implementando un buscador con autosugerencia parecido al de facebook, lo pueden visualizar aqui:
http://soporteredsuns.com/~mahicolc/....com/index.php
Si escriben gospel en el buscador y posterior a esto lo borran completo se darán cuenta que queda pegado la ultima búsqueda y ademas si presionamos fuera de la lista, esta no desaparece.
¿Como podría solucionar esto?
Código PHP:
<script type="text/javascript">
$(document).ready(function(){
$(".search").keyup(function(){
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox==''){
}
else{
$.ajax({
type: "POST",
url: "mysql_functions/search.php",
data: dataString,
cache: false,
success: function(html){
$("#display").html(html).show();
}
});
}return false;
});
});
jQuery(function($){
$("#searchbox").Watermark("Buscar...");
});
</script>
Código PHP:
<?php
include('config.php');
if($_POST){
$q = $_POST['searchword'];
$query = mysql_query("SELECT * FROM user WHERE user like '%$q%' ORDER BY idUser LIMIT 5") or die (mysql_error());
$query2 = mysql_query("SELECT * FROM team WHERE tag like '%$q%' ORDER BY idTeam LIMIT 5") or die (mysql_error());
//Rellenamos primero con los usuarios
while($row = mysql_fetch_array($query)){
$user = $row['user'];
$re_user = '<b>'.$q.'</b>';
$final_user = str_ireplace($q, $re_user, $user);
?>
<div class="display_box" align="left">
<a class='search' href="user/profile.php?id=<?php echo $row['idUser']; ?>" >
<img align="absmiddle" src="<?php echo $row['srcavatar']; ?>" style="width:25px; float:left; margin-right:6px" /><?php echo $row['firstName'] . " "" . $final_user . "" " . $row['lastName']; ?></a><br />
</div>
<?php
}
//Posteriormente con los team
while($row2 = mysql_fetch_array($query2)){
$nameTeam = $row2['tag'];
$re_team = '<b>'.$q.'</b>';
$final_team = str_ireplace($q, $re_team, $nameTeam);
?>
<div class="display_box" align="left">
<a class='search' href="team/profile.php?id=<?php echo $row['idTeam']; ?>" >
<img align="absmiddle" src="<?php echo $row['srcavatar']; ?>" style="width:25px; float:left; margin-right:6px" /><?php echo $row2['name'] . " - "" . $final_team . """; ?></a><br />
</div>
<?php
}
}
else{
}
?>
Código PHP:
(function($) {
var map=new Array();
$.Watermark = {
ShowAll:function(){
for (var i=0;i<map.length;i++){
if(map[i].obj.val()==""){
map[i].obj.val(map[i].text);
map[i].obj.css("color",map[i].WatermarkColor);
}else{
map[i].obj.css("color",map[i].DefaultColor);
}
}
},
HideAll:function(){
for (var i=0;i<map.length;i++){
if(map[i].obj.val()==map[i].text)
map[i].obj.val("");
}
}
}
$.fn.Watermark = function(text,color) {
if(!color)
color="#aaa";
return this.each(
function(){
var input=$(this);
var defaultColor=input.css("color");
map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
function clearMessage(){
if(input.val()==text)
input.val("");
input.css("color",defaultColor);
}
function insertMessage(){
if(input.val().length==0 || input.val()==text){
input.val(text);
input.css("color",color);
}else
input.css("color",defaultColor);
}
input.focus(clearMessage);
input.blur(insertMessage);
input.change(insertMessage);
insertMessage();
}
);
};
})(jQuery);
Estos son los 3 fragmentos de códigos utilizados.