当前位置：文江博客话题详情

使用ajax创建自动建议文本框

发布于 2024-10-16 16:05:47 字数 83 浏览 2 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

睡美人的小仙女 2024-10-23 16:05:47

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

它是 ajax，你需要做的只是提供一个单词列表

回复收藏 0 原文

小巷里的女流氓 2024-10-23 16:05:47

我建议查看 jQuery UI 附带的自动完成插件。

看看他们的官方演示，它说明了它的工作原理。

回复收藏 0 原文

毁梦 2024-10-23 16:05:47

执行以下操作：

在 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>");
    }

希望这会有所帮助。

Do as following:

in 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";
}

and in 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>

format your div to look like a autosuggest box. use css to achieve this.

Also when user selects one option from autosuggest box call java script function which does following
document.getElementById('id_of_div').style.display = "none";

Edit

at server side when you get database list do as follows:

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

Hope this helps.

回复收藏 0 原文

~没有更多了~