Uploaded image for project: 'Tapestry 5'
  1. Tapestry 5
  2. TAP5-2402

autocomplete typeahead suggestions appear/disappear with keystrokes

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 5.4
    • Fix Version/s: 5.4
    • Component/s: tapestry-core
    • Labels:
      None

      Description

      The tapestry autocomplete mixin uses typeahead.js 0.9.3 which seems to have a bug where the suggestions appear/disappear which each key stroke. This seems to have been resolved in the latest version of typeahead.js 0.10.5. I have successfully implemented it locally and resolved the issue. I'm recommending we upgrade the typeahead.js and it's connector to the latest version.

      https://twitter.github.io/typeahead.js/
      http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js

      Below is a working connector.

      define(["t5/core/dom", "t5/core/ajax", "./jquery", "t5/core/utils", "./vendor/typeahead.bundle.min"], function(dom, ajax, $, _arg) {
          var exports, extendURL, init;
      
          extendURL = _arg.extendURL;
      
          init = function(spec) {
              var $field;
      
              $field = $(document.getElementById(spec.id));
      
              var suggestions = new Bloodhound({
                  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                  queryTokenizer: Bloodhound.tokenizers.whitespace,
                  limit: 5,
                  dupDetector: function(remoteMatch, localMatch) {
                      return remoteMatch.value === localMatch.value;
                  },
                  remote: {
                      url: spec.url,
                      replace: function(uri, query) {
                          return extendURL(uri, {
                              "t:input": query
                          });
                      },
                      filter: function(response) {
                          return $.map(response.matches, function(value) {
                              return {value: value};
                          });
                      }
                  }
              });
      
              suggestions.initialize();
      
              return $field.typeahead(
                      {
                          hint: false,
                          highlight: true,
                          minLength: spec.minChars
                      },
              {
                  displayKey: 'value',
                  source: suggestions.ttAdapter()
              }
              );
          };
          return exports = init;
      });
      

        Attachments

          Activity

            People

            • Assignee:
              hlship Howard M. Lewis Ship
              Reporter:
              gchristman George Christman
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: