Question

我在文本字段中使用jquery-textcomplete。一切都很好，但我想模仿Twitter如何为搜索提供自动完成功能以及何时开始输入“@”。在Twitter上，当您执行搜索时 - 除非用户按下键盘上的“向下”键或用鼠标单击进行选择，否则会出现一个下拉菜单并且不会选择任何项目。如果没有做出选择并按“输入”，则Twitter会将您带到搜索结果页面，或者如果您正在撰写推文并按“输入”，则会添加新行。

现在我的代码工作得很好但是jquery-textcomplete会在加载下拉菜单时自动将活动类添加到第一个选项。如果用户在没有做出选择的情况下按下“输入”，则假定您想要第一个选择并执行me.loadPage（value）;功能

这是我的代码：

$('.elastic_search').textcomplete([{ // mention strategy
  match: /(^|\s)(\w+ ?\w+ ?\w+)$/i,
  search: function(term, callback) {
    //me.options.skip = 0;
    //me.options.state = "firstview";

    $.getJSON('/elastic/search', {
      q: term,
      //user_id: userObj.user_id,
      //skip: me.options.skip
      limit: 10,

    }).done(function(resp) {
      callback(resp);
    }).fail(function() {
      callback([]);
    });
  },
  css: function() {
    return {
      'background-color': 'green'
    };
  },
  replace: function(value) {
    return '$1' + $.trim(value._source.username);
  },
  template: function(value) {
    value._source.profilepic = makeImageSize(value._source.profilepic, '35x35');
    if (value._source && value._source.link_type === 'hashcode') {
      return '<div data-type="hashcode">#' + value._source.text + '</div>';
    } else if (value._source.type === 'code') {
      return '<div data-type="entity"><div class="col-xs-2"><img src="' + value._source.profilepic + '" /></div><div class="col-xs-9 resultname">' + (('<b>' + value._source.fullname + '</b>' || ' ') + ' We#' + value._source.wecode) + '</div></div>';
    } else if (value._source) {
      return '<div data-type="entity"><div class="col-xs-2"><img src="' + value._source.profilepic + '" /></div><div class="col-xs-9 resultname">' + ((value.highlight.fullname || ' ') + ' @' + value._source.username) + '</div></div>';
    }
  }
}, { // mention strategy
  match: /(^|\s)we#(\w*)$/i,
  search: function(term, callback) {
    //me.options.skip = 0;
    //me.options.state = "firstview";
    $.getJSON('/elastic/search', {
      q: term,
      fields: ['wecode^4'],
      wecode_complete: "yes",
      //user_id: userObj.user_id,
      //skip: me.options.skip
      limit: 10
    }).done(function(resp) {

      callback(resp);
    }).fail(function() {

      callback([]);
    });
  },
  css: function() {
    return {
      'background-color': 'green'
    };
  },
  replace: function(value) {
    return '$1' + $.trim(value._source.username);
  },
  template: function(value) {
    value._source.profilepic = makeImageSize(value._source.profilepic, '35x35');
    if (value._source && value._source.link_type === 'hashcode') {
      return '<div data-type="hashcode">#' + value._source.text + '</div>';
    } else if (value._source.type === 'code') {
      return '<div data-type="entity"><div class="col-xs-2"><img src="' + value._source.profilepic + '" /></div><div class="col-xs-9 resultname">' + (('<b>' + value._source.fullname + '</b>' || ' ') + ' We#' + value._source.wecode) + '</div></div>';
    } else if (value._source) {
      return '<div data-type="entity"><div class="col-xs-2"><img src="' + value._source.profilepic + '" /></div><div class="col-xs-9 resultname">' + (('<b>' + value._source.fullname + '</b>' || ' ') + ' @' + value._source.username) + '</div></div>';
    }
  }
}], {
  appendTo: $('.search-container'),
  className: 'dropdown-absolute',
  zIndex: '100001',
  placement: 'absleft'
}).on({
  'textComplete:select': function(e, value, strategy) {
    //me.options.hashtags.push(value);
    //This Discover Cards Need to be formatted.
    me.loadPage(value);
  }

我发现在jquery.textcomplete.js中注释掉第411行会阻止第一个项目在前端有.active类，但这不是一个解决方案，因为如果你按下'enter'它的行为就好像第一项被选中，因此第一项仍然是主动选择。

 render: function (zippedData) {
  var contentsHtml = this._buildContents(zippedData);
  var unzippedData = $.map(this.data, function (d) { return d.value; });
  if (this.data.length) {
    this._renderHeader(unzippedData);
    this._renderFooter(unzippedData);
    if (contentsHtml) {
      this._renderContents(contentsHtml);
      // this._activateIndexedItem();  // comment this kind of works
    }
    this._setScroll();
  } else if (this.shown) {
    this.deactivate();
  }
}

我的问题是，如何阻止首选被选中？

使用jquery-textcomplete而不自动选择第一个选项

0 个答案: