Typeahead on content-editable div

[vkocjancic]

Hi.

I have a div where users can alter div content. This is done with help of contenteditable attribute. I implemented typeahead on insert and it works fine, unless:

• you decide to select text and delete it. After that it does not work anymore
• if you have already selected some value from typeahead it will not work even if you delete value.

[trent8464]

You can modify the following code to solve this problem. (bootstrap3-typeahead.js At line 563)

  input: function (e) {
            if(this.$element[0].tagName === 'DIV'){
                 this.$element.val(this.$element.text());
            }
            var currentValue = this.$element.val() || this.$element.text();
            if (this.value !== currentValue) {
                this.value = currentValue;
                this.lookup();
            }
        },

and at the line 77 (Focus moves to the end）

    select: function () {
      var val = this.$menu.find('.active').data('value');
      this.$element.data('active', val);
      if (this.autoSelect || val) {
        var newVal = this.updater(val);
        // Updater can be set to any random functions via "options" parameter in constructor above.
        // Add null check for cases when updater returns void or undefined.
        if (!newVal) {
          newVal = '';
        }
        this.$element
          .val(this.displayText(newVal) || newVal)
          .text(this.displayText(newVal) || newVal)
          .change();

          var textbox = this.$element[0];
          var sel = window.getSelection();
          var range = document.createRange();
          range.selectNodeContents(textbox);
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);

        this.afterSelect(newVal);
      }
      return this.hide();
    },