Hola a todos!!
He creado un buscador con autocomplete, de un tutorial colgado en youtube.
El autocomplete se rellena con datos de una tabla que tengo, pero esta tabla contiene cerca de 500.000 datos, por lo que al pulsar en el buscador y marcar alguna letra se cuelga, ya que me aparece una lista infinita de palabras, por lo que mi pregunta es
cómo hago para limitar la busqueda? es decir que me aparezca un scroll bar o un límite de resultados hasta 10 (por ejemplo).
he probado con varios
tengo cuatro archivos:
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Paises</title>
<link rel="stylesheet" href="Style.css">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
</head>
<body>
<center>
<div id="content_holder">
<form action="index.php" method="post">
<input type="text" name="country" value="" id="country" onBlur="setTimeout('removeSuggestions()', 200);" onKeyUp="getSuggestions(this.value);" /><input name="Submit" type="Submit" value="Buscar" />
</form>
<div id="suggestions"></div>
</div>
</center>
</body>
</html>
country.php
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("es") or die(mysql_error());
$countryPart = mysql_real_escape_string(addslashes($_POST['countryPart']));
$result = mysql_query("SELECT * FROM esall WHERE SEO LIKE '$countryPart%'") or die(mysql_query());
function boldThat($partCountry, $realValue){
//$partCountry = Ele
//$realValue = Electrodomesticos
$length = strlen($partCountry);
$length2 = strlen($realValue);
$mainLength = $length - $length2;
$notBolded = substr($realValue, 0, $mainLength);
$bolded = substr($realValue, $mainLength);
return $notBolded . "<strong>" . $bolded . "</strong>";
}
while($row = mysql_fetch_assoc($result)) {?>
<img src="<?php echo $row['Imagenz'];?>" width="50" height="50"><?php echo "<div id='link' onclick='addText(\"" . $row['SEO'] . "\")'>" . boldThat($countryPart, $row['SEO']) . "</div>";
}
?>
syle.css
@charset "utf-8";
#content_holder {
margin-top: 60px;
width: 500px;
}
input#country {
width: 300px;
}
#suggestions {
text-align: left;
padding-left: 3px;
}
#link:hover {
background-color: #FF9933;
cursor: default;
}
y
autocomplete.js:
// JavaScript Document
function getSuggestions(value) {
if(value != ""){
$.post("country.php", {countryPart:value}, function(data) {
$("#suggestions").html(data);
doCSS();
});
} else {
removeSuggestions();
}
}
function removeSuggestions(){
$("#suggestions").html("");
undoCSS();
}
function addText(value) {
$("#country").val(value);
}
function doCSS(){
$("#suggestions").css({
'border' : 'solid',
'border-width' : '1px'
});
}
function undoCSS(){
$("#suggestions").css({
'border' : '',
'border-width' : '',
});
}
Alguien me puede ayudar....
Gracias y un saludo