Êáëþò Þñèáôå óôï forum ìáò! Ãéá íá óõììåôÜó÷åôå óôéò óõæçôÞóåéò èá ðñÝðåé íá åßóáóôå ìÝëïò. Ãßíåôå ìÝëïò ôþñá!.
Ôþñá åßíáé 09 Öåâ 2010 17:23
All times are UTC + 2 |
Moderators:
Super-Moderators, WebDev Moderators
| ÁðïóôïëÝáò |
ÌÞíõìá |
lakritidis
ÌÝëïò áðü: 04 Áõã 2005
Ìçíýìáôá: 256+
Ðåñéï÷Þ: Katerini
   
|
 Óôéò: 18 Éïõë 2007 22:13 ÈÝìá:
Buggy AJAX autocomplete feature |
 
|
|
Óå ìåñéêÝò õðçñåóßåò üðùò ç ask.com, õðÜñ÷åé Ýíá ðïëý ùñáßï autocomplete (Þ autosuggest) feature, ðïõ êÜôù áðü ôï textbox, ðñïôåßíïíôáé áõôüìáôá êÜðïéá keywords.
Ôé èÝëïõìå; Ìüëéò ï user ðëçêôñïëïãÞóåé ôïõò ôñåéò ðñþôïõò ÷áñáêôÞñåò ìßáò ëÝîçò Þ öñÜóçò, íá ãßíåé áõôüìáôá Ýíá query óå ìßá MySQL database (ìÝóù åíüò php script) êáé êÜôù áðü ôï textbox íá åìöáíéóôïýí ôá áðïôåëÝóìáôá ôïõ query. Ìüëéò äþóåé ôïí ôÝôáñôï íá ãßíåé íÝï query klp.
Ôï ðáñáêÜôù óêñéðôÜêé êÜíåé áõôÞ ôç äïõëåéÜ, ðáßñíåé áõôü ðïõ Ý÷åé äþóåé ï user, ðñáãìáôïðïéåß ôï query êáé åðéóôñÝöåé ôéò 15 ðéï óõ÷íÜ ÷ñçóéìïðïéïýìåíåò keywords óå ìïñöÞ xml.
suggest.php
| êþäéêáò: | <?php
$InputQuery = $_POST['query'];
include('constants.php');
$cache = mysql_connect(HOSTNAME, USERNAME, PASSWORD) or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db(DATABASE, $cache);
mysql_query('SET character_set_results="utf8"');
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET NAMES 'utf8'");
if (strlen($InputQuery) >= 3) {
$select_suggest = sprintf("
SELECT query_string, COUNT(query_string) FROM queries
WHERE query_string LIKE '%s'
GROUP BY query_string
ORDER BY COUNT(query_string) DESC
LIMIT 0, 15",
mysql_real_escape_string($InputQuery) . "%");
$suggest_query = mysql_query($select_suggest, $cache) or die(mysql_error());
$row_suggest = mysql_fetch_assoc($suggest_query);
$totalRows_suggest = mysql_num_rows($suggest_query);
if (class_exists('DOMDocument')) {
$xmlDoc = new DOMDocument('1.0', 'utf-8');
$xmlDoc->formatOutput = true;
$root = $xmlDoc->createElement('root');
$root = $xmlDoc->appendChild($root);
} else {
$xmlDoc = '<?xml version="1.0" encoding="utf-8"?>';
$xmlDoc .= '<root>';
}
$key = 0;
if ($totalRows_suggest > 0) {
do {
$key = $key + 1;
if (class_exists('DOMDocument')){
$item = $xmlDoc->createElement('item');
$item = $root->appendChild($item);
$item->setAttribute('id', $key);
$item->setAttribute('label', rawurlencode($row_suggest['query_string']));
} else {
$xmlDoc .= '<item id="' . $key . '" label="' . rawurlencode($row_suggest['query_string']) . '"></item>';
}
} while ($row_suggest = mysql_fetch_assoc($suggest_query));
}
header("Content-type:application/xml; charset=utf-8");
if (class_exists('DOMDocument')){
echo $xmlDoc->saveXML();
} else {
$xmlDoc .= '</root>';
echo $xmlDoc;
}
}
?> |
Ïê áðü ôçí php. Ôþñá óáí íÝïò óôçí ajax Ýøáîá êÜôé ðáñüìïéï êáé âñÞêá áõôü:
http://www.rafaeldohms.com.br/2006/07/16/developing-an-auto-complet...-with-ajaxphp/en/
Ôñïðïðïßçóá ëßãï ôïí êþäéêá ãéá íá ôï öÝñù óôá ìÝôñá ìïõ. Äåí èá ðáñáèÝóù ôïí êþäéêá ãéá ëüãïõò ìåãÝèïõò. üóïé åðéèõìïýí íá âïçèÞóïõí ìðïñïýí íá ôïí äïýíå åäþ:
http://quadsearch.csd.auth.gr/test/autocomplete.js
Ôï áðïôÝëåóìá äïõëÝõåé, áëëÜ å÷åé åíá bug. Ìüëéò åìöáíßæåôáé ç ëßóôá ìå ôá suggestions, ÷Üíïíôáé üëá ôá select controls ôçò öüñìáò!
Äåßôå ôï live
http://quadsearch.csd.auth.gr/test/index.php
Ï êþäéêáò áõôÞò ôçò óåëéäáò åßíáé:
index.php
| êþäéêáò: | <html>
<head>
<title>AJAX Suggestion</title>
<script src="autocomplete.js"></script>
<style type="text/css">
#acDiv{ border: 1px solid #9F9F9F; background-color:#F3F3F3; padding: 3px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; display:none; position:absolute; z-index:999;}
#acDiv UL{ list-style:none; margin: 0; padding: 0; }
#acDiv UL LI{ display:block;}
#acDiv A{ color:#000000; text-decoration:none; }
#acDiv A:hover{ color:#000000; }
#acDiv LI.selected{ background-color:#7d95ae; color:#000000; }
</style>
</head>
<body onLoad="document.testform.query.focus()">
<form action="#" method="POST" name="testform">
<input name="query" type="text" id="query" maxlength="200" size="45" />
<select name="sel1">
<option value="1">Select 1 Option 1</option>
<option value="2">Select 1 Option 2</option>
</select>
<select name="sel2" >
<option value="1">Select 2 Option 1</option>
<option value="2">Select 2 Option 2</option>
</select>
<input type="checkbox">test checkbox
<div id="acDiv"></div>
</form>
<img src="nopic" width="100" height="100" alt="We have a picture here">
<script language="javascript">
var AC = new dmsAutoComplete('query','acDiv');
AC.clearField = false;
AC.chooseFunc = function(id,label) { alert(id+'-'+label); }
</script>
</body>
</html> |
Ðïõ ïöåßëåôáé áõôü ñå ðáéäéÜ;
Êáé êÜôé áêüìá. Åßíáé áõôüò ï êþäéêáò åðéêßíäõíïò ãéá memory leaks (êõñßùò óôïí ÉÅ); ¸÷åé êÜðïéï Üëëï ðñüâëçìá áóöÜëåéáò; |
|
 |
|
lakritidis
ÌÝëïò áðü: 04 Áõã 2005
Ìçíýìáôá: 256+
Ðåñéï÷Þ: Katerini
|
| Óôéò: 02 Áõã 2007 22:28 ÈÝìá:
|
|
|
ÐáéäéÜ ôï ðñüâëçìá ëýèçêå. Äåí Þôáí bug, áëëÜ ìéá ðáñÜìåôñïò ôïõ js áñ÷åßïõ. ÁðëÜ èÝôïõìå:
this.hideSelects = false;
êáé ïëá ïê. |
|
|
|
|
Powered by p h p B B © 2001,2005 p h p B B Group
|
FAQ
ÁíáæÞôçóç
Ëßóôá Ìåëþí
ÏìÜäåò Ìåëþí
ÅããñáöÞ ÌÝëïõò
Ðñïößë
Ôá bookmarks ìïõ
ÐñïóùðéêÜ ìçíýìáôá
Bookmark
ForaCamp
