近日學習了一下AJAX，照做了幾個例子，感覺比較新奇。

第一個就是自動完成的功能即Autocomplete,具體的例子可以在這里看：http://www.b2c-battery.co.uk

在Search框內輸入一個產品型號，就可以看見效果了。

這里用到了一個開源的代碼：AutoAssist ，有興趣的可以看一下。

以下為代碼片斷：

index.htm

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/autoassist.js"></script>
<link rel="stylesheet" type="text/css" href="styles/autoassist.css"/>

<div>

<input type="text" name="keyword" id="keyword"/>
<script type="text/javascript">
Event.observe(window, "load", function() {
?var aa = new AutoAssist("keyword", function() {
??return "forCSV.php?q=" + this.txtBox.value;
?});
});

</script>
</div>

不知道為什么不能用keywords做文本框的名字，我試了很久，后來還是用keyword,搞得還要修改原代碼。

forCSV.php

<?php
? $keyword = $_GET['q'];
? $count = 0;
? $handle = fopen("products.csv", "r");
? while (($data = fgetcsv($handle, 1000)) !== FALSE) {
??? if (preg_match("/$keyword/i", $data[0])) {
????? if ($count++ > 10) { break; }
?>
????? <div onSelect="this.txtBox.value='<?php echo $data[0]; ?>';">
??????? <?php echo $data[0]; ?>
????? </div>
<?php
??? }
? }
? fclose($handle);
? if ($count == 0) {
?>
? : (, nothing found.
<?php
? }
?>

原來的例子中的CSV文件是根據\t來分隔的，我們也可以用空格或其它的來分隔，這取決于你的數據結構。

當然你也可以不讀文件，改從數據庫里讀資料，就不再廢話了。

效果圖如下：

?

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=635858