自动完成的功能即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来分隔的,我们也可以用空格或其它的来分隔,这取决于你的数据结构。