无刷新技术问题

怎么可以像百度那样输入任意字符后就把它所匹配的内容像下拉列表一样列出来呢？
比如，我有一个文本框和一个下拉列表框，现在想在文本框里输入a,下拉列表框里就要列出所有包函a的内容，能给个例子吗？要怎么做，没思路

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

大家就给我一个用javaScript和ajax做的例子吧！
以下是我以前做练习的时候写的，不知道对LZ有没有帮助//ajax关键代码
Suggest.js
var xmlHttp;
var currentInfo = "";
var counter = 1;
var isReading = true;
var mean;
var word;function createXmlHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}function readInfo(){
var info = document.getElementById("info").value;
if(currentInfo==info&&info!=""){
counter = counter + 1;
}else{
currentInfo = info;
counter = 1;
}
if(info==""){
hiddenSuggest();
}
if(counter==3){
getSuggest(info);
isReading = false;
}else{
setTimeout("readInfo()",200);
}
}function getSuggest(info){
createXmlHttp();
xmlHttp.onreadystatechange = showSuggest;
xmlHttp.open("GET","suggest.jsp?info="+info,true);
xmlHttp.send();
}function showSuggest(){
if(xmlHttp.readyState==4){
clearSuggest();
var suggestText = xmlHttp.responseText;
mean = new Array();
if(suggestText!=""){
var suggests = suggestText.split("|");
if((suggests[0].split("-")[0]==document.getElementById("info").value)&&(suggests.length==2)){
mean[0] = suggests[0];
hiddenSuggest();
return;
}else{
for(var i=0;i<suggests.length-1;i++){
mean[i] = suggests[i];
createSuggest(suggests[i].split("-")[0]);
}
}
displaySuggest();
}else{
hiddenSuggest();
}
}
}function clearSuggest(){
document.getElementById("suggest").innerHTML="";
}function createSuggest(text){
var sDiv = "<div class='out' onmouseover=\"this.className='over'\""+"onmouseout=\"this.className='out'\" onclick='setSuggest(this)'>"+text+"</div>";
document.getElementById("suggest").innerHTML+=sDiv;
}function setSuggest(src){
document.getElementById("info").value=src.innerHTML;
hiddenSuggest();
}function resetReading(){
if(!isReading){
isReading = true;
document.getElementById("result").style.display = "none";
readInfo();
}
}function displaySuggest(){
document.getElementById("suggest").style.display="";
}function hiddenSuggest(){
document.getElementById("suggest").style.display="none";
}function showInfo(){
var exist = false;
word = document.getElementById("info").value;
document.getElementById("result").style.display = "";
hiddenSuggest();
//alert(mean.length);
if((mean!=null)&&(mean.length!=0)){
for(var i = 0;i<mean.length;i++){
if(mean[i].split("-")[0]==word){
document.getElementById("result").innerHTML = mean[i].split("-")[1];
exist = true;
break;
}
}
}
if(!exist){
document.getElementById("result").innerHTML = "找不到您要的单词！";
}
}//测试页面
index.jsp
<%@ page contentType="text/html;charSet=gb2312" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>输入内容前提示</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="输入内容前提示">
<LINK href="../styles/Styles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="Suggest.js"></script>
<style type="text/css">
#suggest{
width:258px;
border:1px solid #D0D5FD;
font-size:14px;
}

div.over{
border:1px solid #D0D5FD;
background:#FCFDDF;
cursor:hand;
color:#666666;
}

div.out{
border:1px solid #ffffff;
background:#ffffff;
color:#A8A8A8;
}
</style>
  </head>

  <body onload="readInfo()">
<form name="form1" action="#">
     <table border="0" cellspacing="1" cellpadding="0" align="center" style="position:relative;top:200px;">
   <tr>
   <td>
   <input type="text" size="40" name="info" id="info" onkeyup="resetReading()">
   <input type="button" value="查找" onclick="showInfo()">
   <div id="suggest" style="display:none;position:relative;top:0px;"></div>
   <div id="result" style="display:none;position:relative;top:0px;"></div>
   </td>
   </tr>
   </table>
   </form>
  </body>
</html>//显示获取的信息页面
suggest.jsp
<%@ page contentType="text/html;charSet=gb2312" pageEncoding="gb2312"%>
<%@ page import="org.ajax.rohsuton.action.SuggestAction" %>
<%
out.clear();
SuggestAction sa = new SuggestAction();
String info = request.getParameter("info");
if(!"".equals(info)){
out.print(sa.getText(info));
}
%>//java代码，实现从文本中读取数据
package org.ajax.rohsuton.action;import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Iterator;import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;public class SuggestAction{
private static String fileName = "";//文件名
         /*
        文件中保存的信息格式如下：
        1|a|art|一(个)；每一(个)
        2|abandon|vt|丢弃；放弃，抛弃
         3|ability|n|能力；能耐，本领
        */

public static void main(String[] args) {
//System.out.println(getDetailById("1"));
}
/**
* 读取文件内容
*/
public String getText(String info){
String str = "";
String result = "";
String temp[];
int i=1;
BufferedReader br = null;
try {
br = new BufferedReader(new InputStreamReader(new FileInputStream(fileName)));
while((str = br.readLine())!=null&&!"".equals(str)){
temp = str.split("\\|");
if(info.length()<=temp[1].length())
{
if(Search1(info,temp[1])&&i<=10){
result = result+temp[1]+"-"+temp[2]+"."+temp[3]+"|";
i++;
}
}
}
} catch (FileNotFoundException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return result;
}

/**
* 模糊查询
* @return
*/
private boolean Search(String key,String str){
boolean result=false;
for(int i=0;i<str.length()-key.length();i++){
if(str.substring(i, i+key.length()).equals(key)){
result =true;
break;
}
}
return result;
}

/**
*
* 头块字母匹配查询
* @return
*/
private boolean Search1(String key,String str){
boolean result=false;
if(str.substring(0, key.length()).equals(key)){
result =true;
}
return result;
}
}
到www.veryCD.com搜Ajax，找视频看看！
使用ajax 具体的ajax的使用可以到网上找找资料，自己看看哈
应该叫做google的suggest，智能提示
以下是用.NET实现的,详细的源码在http://www.codeproject.com/KB/ajax/AJAXAutoSuggest.aspx,注册一个账号就可以下了
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    this.asbFavoriteBand.TextChanged +=
        new Anthem.AutoSuggestBox.TextChangedEventHandler(
        asbFavoriteBand_TextChanged);    this.asbFavoriteBand.SelectedValueChanged +=
        new Anthem.AutoSuggestBox.SelectedValueChangedHandler(
        asbFavoriteBand_SelectedValueChanged);
}void asbFavoriteBand_TextChanged(object source,
        Anthem.AutoSuggestEventArgs e)
{
    //Creates a dataview from a datatable
    DataView dv = new DataView(_dtBands);    //Filters the datatable based on the CurrentText property
    dv.RowFilter = string.Format("BandName LIKE '%{0}%'", e.CurrentText);    //Sets the dataview as the control's datasource
    asbFavoriteBand.DataSource = dv;
    asbFavoriteBand.DataBind();
}
我的资源里有个jsp+AJAX级联的源码，楼主去看看，参考下