关于bootsreap自动提示typeahead的bug

标签：bootstrap typeahead javascript

      bootstrap是开源的前端开发框架，里面提供了很多的插件可以提供给开发者使用，当然也包括很多模板和样式。

    前段期间在研究自动完成的时候发现了bootstrap自动提示中的一个问题，接下来就这个问题具体解决一下。

首先声明一下，公司的项目中用的是bootstrap2。

   问题描述：在中文输入法下，对已经声明为typeahead的输入框输入的时候，此时按下enter键的时候，不会对已有的内容做出自动提示。

    解决思路：主要这个时候输入法捕捉到了我们的按键会出现中文输入的一些提示，比如搜狗的那些词语提示。当然有可能也会出现搜狗提示框挡住我们的自动完成的提示框。如果输入正确，按下enter键的时候我们的理想状态是应该出现一个提示的。但是此时并没有。我们查看bootstrap关于typeahead的源码发现这样的代码段：

  以下是按键按下的方法：

 keyup: function (e) {
    switch (e.keyCode) {
        case 40:
        case 38:
        case 16:
        case 17:
        case 18:
            break;
        case 9:
        case 13:
            if (!this.shown)return;
            this.select();
            break;
        case 27:
            if (!this.shown)return;
            this.hide();
            break;
        default:
            this.lookup()
    }
    e.stopPropagation(), e.preventDefault()
}

      看了之后就会发现，按下enter在这里是执行了选择的事件，而此时我们的typeahead提示框中并没有选中我们想要的结果，这时候就执行选择事件显然不是我们想要的结果。

      以下是我修改后的代码：

keyup: function (e) {
    switch (e.keyCode) {
        case 40:
        case 38:
        case 16:
        case 17:
        case 18:
            break;
        case 9:
        //case 13:
            if (!this.shown)return;
            this.select();
            break;
        case 27:
            if (!this.shown)return;
            this.hide();
            break;
        case 13:
            if (!this.shown) {this.lookup();return;}
            this.select();
            break;
        default:
            this.lookup()
    }
    e.stopPropagation(), e.preventDefault()
}

    看了代码就会发现，我们去掉了enter原来的处理，新增了一个支路用来处理我们的方法。主要逻辑是：如果没有显示提示框，则我们需要去查找以下数据，显示提示框。如果显示了，我们就执行选择事件。

    解决问题了。这个问题主要可能是bootstrap开发者可能没有面临输入中文执行enter的事件所以没有发现这个问题，又或者，再boostrap3的时候已经做了修复。

本文出自 “默守陈归” 博客，请务必保留此出处http://snaile.blog.51cto.com/8061810/1727139

关于bootsreap自动提示typeahead的bug

标签：bootstrap typeahead javascript

原文地址：http://snaile.blog.51cto.com/8061810/1727139