如何在Struts2-jQuery的Autocompleter组件中实现输入文本高亮及点击外部文本选中的功能？

我完全理解你的困扰——之前用Struts2+Dojo的自动完成组件自带的两个实用特性，换成Struts2-jQuery组件后居然没了，不过别担心，咱们可以通过组件配置加一点简单的JS代码搞定这两个需求。

先修正你代码里的小问题 #

首先你写的<sj:autocompleter>的list属性有语法错误，多套了一层引号，正确的写法应该是：

<sj:autocompleter name="yourLuckyNumber" 
                  list="{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}" />

1. 实现输入文本在下拉结果中高亮 #

Struts2-jQuery的autocompleter其实自带了高亮功能，只是默认没开启，你只需要给组件添加highlight="true"属性就能启用：

<sj:autocompleter name="yourLuckyNumber" 
                  list="{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}"
                  highlight="true" />

开启这个属性后，下拉结果里匹配你输入内容的部分会自动被加粗高亮，和你之前用Dojo时的效果一致。

2. 实现点击输入框外部时选中已输入的文本 #

这个功能Struts2-jQuery没有默认提供，我们可以自己写一段jQuery代码来实现。思路是监听整个文档的点击事件，判断点击的目标是不是autocompleter的输入框或者它的下拉菜单，如果不是，就选中输入框里的文本：

<script type="text/javascript">
$(document).ready(function() {
    // 获取autocompleter对应的输入框元素
    var $input = $('input[name="yourLuckyNumber"]');
    
    $(document).on('click', function(e) {
        var $target = $(e.target);
        // 判断点击的元素是不是输入框本身，或者下拉菜单的一部分
        if (!$target.is($input) && !$target.closest('.ui-autocomplete').length) {
            // 选中输入框内的文本
            $input.select();
        }
    });
});
</script>

完整的示例代码 #

把这些整合到你的页面里，最终代码大概是这样的：

<body>
<h1>Struts 2 jQuery autocompleter example</h1>

<s:form action="resultAction" namespace="/" method="POST">
    <sj:autocompleter name="yourLuckyNumber" 
                      label="What's your lucky number?"
                      list="{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}"
                      highlight="true" />
    <s:submit value="submit" name="submit" />
</s:form>

<script type="text/javascript">
$(document).ready(function() {
    var $input = $('input[name="yourLuckyNumber"]');
    
    $(document).on('click', function(e) {
        var $target = $(e.target);
        if (!$target.is($input) && !$target.closest('.ui-autocomplete').length) {
            $input.select();
        }
    });
});
</script>
</body>

这样配置后，你就能获得和之前Dojo组件一样的两个特性了：输入文本在下拉结果中高亮，点击输入框外部时自动选中文本。

备注：内容来源于stack exchange，提问作者prashanth-g