mybaits+bootstrap的模糊查询实现

需求大概是这样的，有中介机构表和员工表，现在我们要做个添加中介机构员工信息的表单，添加员工的时候要先添加机构名，但是添加的机构名如果和机构表的机构名有一字之差，就会导致插入一条新的企业记录，但是用户应该是同一家公司，例如 阿里巴巴，或则阿里巴巴集团公司。
我考虑了一会儿想到用模糊查询去显示已经存在匹配的公司，例如当输入一个“阿里”的时候，就会出现“阿里巴巴集团公司”的选项。然后点击即可填充进input的text里。
首先写页面，页面套用的bootstrap的样式。bootstrap真的是一个很不错的模板，提供了良好的移动端的兼容性还有流行的扁平化界面还有强大的css与js库。
因此页面很快拼接完成。拼接的效果如下：

页面完成开始写业务逻辑，这里涉及多张表，由于属于商业机密这里不展示。机构名会通过js实时模糊查询后台的数据库返回。这里用到了bootstrap的js插件。这让后端只用给前端提供一个list即可放到提示框里，这里参考了bootstrap Typeahead下拉框使用插件。
关键的js代码为：

$(document).ready(function($) {
                    // Workaround for bug in mouse item selection
$.fn.typeahead.Constructor.prototype.blur = function() {
var that = this;
setTimeout(function() {
that.hide()}, 250);
        };$('#enterpriseNameID').typeahead({source : function(query, process) {
                var parameter = {
                    query : query
                };
                $.post(contextPath + '/ajax/system!vagueSearchEnterpriseName.htm',
    parameter,
        function(data) {
        process(data);
        });}});})

然后是编写Service层，就是暴露方法给Controller去使用，值得一提的是Mapper里的模糊查询数据库的语句为：

<select id="selectEnterpriseListByEnterpriseName" resultMap="EnterpriseResultMap" parameterType="java.lang.String">
        SELECT
        <include refid="enterprise_column_list" />
        FROM
        <include refid="enterprise_table_name" />
        WHERE
        enterprise_name 
        LIKE 
        concat(concat('%',#{enterprise_name},'%'))
    </select>

实现的效果：

之后还顺利完成了Employee的模糊查询，这里不同处要还要做一个企业名的拼接，因为不同企业可能有相同人名的，只有企业和人名两个属性去控制唯一性。