使用 ajax 创建自动提示文本框答案

【问题标题】：Create autosuggest textbox with ajax使用 ajax 创建自动提示文本框
【发布时间】：2011-02-06 16:38:07
【问题描述】：

我想用 ajax 创建自动提示文本框。写入一些字符后，它将返回电子邮件地址。从 DB 中的那些字符开始。那应该在JSP中开发。任何人都可以有一个想法吗？

【问题讨论】：

标签： java javascript jquery ajax jsp

【解决方案1】：

您是否考虑过将 jquery UI 与您的 Web 应用程序集成。 jquery UI 有自动完成/建议插件http://docs.jquery.com/Plugins/autocomplete

它是 ajax，您只需提供一个单词列表

【讨论】：

嗨...我只使用这个docs.jquery.com/UI/Autocomplete 链接...但是在从该函数调用的那个页面中遇到问题...我是否可以从页面返回任何内容。 .其中我正在获取所有数据..???

【解决方案2】：

我建议查看 jQuery UI 附带的 autocomplete plugin。

看看他们的official demo，它说明了它是如何工作的。

【讨论】：

【解决方案3】：

执行以下操作：

在javascript中：

function getValue(str){
   if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
url = url +"?" +str;
 xmlhttp.open("POST",url_to_get_db_data,false);
xmlhttp.send(null);
document.getElementById('id_of_div').innerHTML=xmlhttp.responseText;
document.getElementById('id_of_div').style.display = "block";
}

在 html 中：

<input onkeypress="getValue(this.value)"/>   //--- this will be your input text
<div id="id_of_div" style="display:none;">   //--- this is your autosuggest box which will appear down to textbox. Use css to show it at proper location.
</div>

格式化您的 div，使其看起来像一个自动建议框。使用css 来实现这一点。

此外，当用户从自动建议框中选择一个选项时，调用 java 脚本函数执行以下操作 document.getElementById('id_of_div').style.display = "none";

编辑

在服务器端获取数据库列表时，请执行以下操作：

for(Iterator it=db_list.iterator();it.hasNext();)
    {
        Object obj = (Object) it.next();
        String value = obj.getValue();
        out.print(value+"<br>");
    }

希望这会有所帮助。

【讨论】：

@Mayur：我已经编辑了我的问题以获得更多理解。看看
谢谢Harry....在那个url中，通过'like%'比较数据库中每个字符的逻辑应该是什么，最后我会得到一个列表......我们是否喜欢在哪里设置该列表？你能这样解释我吗？？？....