实现自动补全功能

Question

我想做一个自动补全的功能，当我在文本框中输入文本时，就会从数据库中读出匹配的数据显示，望各位高手能给出思路（用ssh框架），如有代码亦好。更希望能实现拼音也能匹配的效果  先谢过各位

Answer 1

自动匹配jquery有插件autocomplete

Answer 2

我对jquery还没有研究，所以不是很了解

Answer 3

既然jquery不熟，ajax应该会吧，监听文本框的keyup事件，输入域不为空就调用ajax查询，返回然后显示就是css的问题了

Answer 4

我用的是ssh框架，action里面的方法返回的是String类型，而我查询的是集合，1.我如何把这个集合返回给js进行遍历呢？2.我在js获取文本框输入的值传给action时如何给传过去的值编码，在action里又如何解码呢？不编码就会乱码

Answer 5

ssh和ajax有什么关系，list集合的话你可以返回一个xml文件给ajax的callback函数，js解析dom就是了。
编码这就得根据自己的环境弄了

Answer 6

类似于百度和谷歌的那个效果吧？我当时的做法就是利用Ajax异步通信,在页面用JS事件(那个事件现在记不清了,好像是键盘的事件),然后就在前台页面接受返回的值,利用div来显示和隐藏拼音的不会做,主要不知道它的内部规则是怎么样的

Answer 7

这是我的action：
@Component("ShopMan")
public class ShopManAction extends GenericAction{
private ShopManBiz shopManBiz;
@Autowired
public void setShopManBiz(ShopManBiz shopManBiz) {
this.shopManBiz = shopManBiz;
}

public String findByName(){
String sName=request.getParameter("names");
shopManBiz.findByName(sName);  //这里返回集合 return null;
}
}
我应该如何把shopManBiz.findByName(sName);返回的集合添加到xml文件中去呢？ 小弟学的不是很精，望能指点  先谢了

Answer 8

kelvin__zhang同学，我都说的这么清楚了，你弄不能自己东东手啊，自己不会写，可已google类似的啊，

Answer 9

可以采用：按下的onkeydown="function（）"事件处理数据！当你按下字母或什么键的时候就自动调用一个js方法这样不就成功了！

Answer 10

我有自动补齐例子，用的servlet，自己改写成s2sh框架就可以了。用jquery实现了英文的自动补全，返回结果为xml，没有在数据库中查询数据。

Answer 11

var hlIndex = -1;
var timeOutId = null;
$(document)
.ready(function() {
var textNode = $("#word");
// 自动补全框最先应该隐藏
var autoNode = $("#auto");
autoNode.hide();
var textOffSet = textNode.offset();
// 给文本框加上键盘按下和弹起的事件
textNode.keyup(function(event) {
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
if ((keyCode >= 65 && keyCode <= 90) || keyCode == 8
|| keyCode == 46) {
// 如果按下字母或者是delete或者是退格键，则执行如下代码
var wordNodes = null;
// 处理文本框的按下键盘的事件
// 1.获取文本框的内容
var wordText = $("#word").val();
if (wordText != "") {
//清空timeOutId
clearTimeout(timeOutId);
//设置延时避免频繁提交对服务器造成的压力
                               timeOutId=setTimeout(function() {
        // 2.将文本框内容发送给服务端。
        $
        .post("AutoComplete", {
        word : wordText
        }, function(data) {
        // 将dom对象转换为jquery对象
        var jObj = $(data);
        // 找到所有的word节点
        wordNodes = jObj.find("word");
        // 遍历所有word节点，取出单词内容，然后将单词内容添加到弹出框中
        autoNode.empty();
        wordNodes.each(function(i) {
        // 获取单词内容
        var wordNode = $(this);
        var wordNodeText = wordNode
        .text();
        var newDivNode = $("<div>")
        .attr("id", i);
        // 新建div节点
        // 将单词内容加入的新建节点
        newDivNode.html(
        wordNodeText)
        .appendTo(autoNode);
        // 给div节点增加高亮，离开去高亮的事件
        newDivNode
        .mouseover(function() {
        // 鼠标移进来
        if (hlIndex != -1) {
        $("#auto")
        .children(
        "div")
        .eq(
        hlIndex)
        .css(
        "background-color",
        "white");
        }
        hlIndex = $(
        this)
        .attr(
        "id");
        $(this)
        .css(
        "background-color",
        "red");        });
        newDivNode
        .mouseout(function() {
        // 鼠标移出去
        $(this)
        .css(
        "background-color",
        "white");
        });        newDivNode
        .dblclick(function() {
        // 鼠标点击补全功能
        $("#auto")
        .hide();
        var divText = $(
        this)
        .text();
        hlIndex = -1;
        $("#word")
        .val(
        divText);
        });        });
        // 如果服务端有数据返回，则显示弹出框
        if (wordNodes.length > 0) {
        autoNode
        .css(
        "left",
        textOffSet.left
        + "px")
        .css(
        "top",
        textOffSet.top
        + textNode
        .height()
        + 6
        + "px")
        .width(
        textNode
        .width()
        + 4
        + "px");
        autoNode.fadeIn();
        } else {
        autoNode.fadeOut();
        hlIndex = -1;
        }
        }, "xml");
},500);
} else {
autoNode.hide();
hlIndex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
var autoNodes = $("#auto").children("div");
// 如果按下的向上向下键
if (keyCode == 38) {
if (hlIndex != -1) {
autoNodes.eq(hlIndex).css("background-color",
"white");
hlIndex = hlIndex - 1;
if (hlIndex == -1) {
hlIndex = autoNodes.length - 1;
}
} else {
hlIndex = autoNodes.length - 1;
}
autoNodes.eq(hlIndex)
.css("background-color", "red");
} else {
if (hlIndex != -1) {
autoNodes.eq(hlIndex).css("background-color",
"white");
hlIndex = hlIndex + 1;
if (hlIndex == autoNodes.length - 1) {
hlIndex = 0;
}
} else {
hlIndex = 0;
}
autoNodes.eq(hlIndex)
.css("background-color", "red");
} } else if (keyCode == 13) {
// 如果按下的是回车 // 如果有高亮的内容
if (hlIndex != -1) {
$("#auto").hide();
var divText = $("#auto").children("div")
.eq(hlIndex).text();
hlIndex = -1;
$("#word").val(divText);
} else { // 如果没有高亮内容
alert("文本框的内容是：[" + $("#word").val() + "]被提交了。");
$("#auto").hide();
// 让文本框失去焦点
$("#word").get(0).blur();
}
} }); // 给按钮添加click事件,表示文本框中的内容被提交
$("input[type='button']").click(function() {
alert("文本框的内容是：[" + $("#word").val() + "]被提交了。");
});
});
jQuery(document).ready(function(){

});