标签: jquery-tokeninput

我正在编写一个基于用户输入的脚本,

我有一些字段需要从数据库中获取其值,

如果没有找到条目,我想添加一个新值,以便下一个用户通过自动完成找到它.

我发现这个外观漂亮且易于实现的jquery插件叫做TokenInput,但它似乎没有

接受我的数据库查询中不可用的条目.

这是插件的链接:http://loopj.com/jquery-tokeninput/demo.html

这有解决方法吗？或者你建议另一个已经有这个功能的插件.

我有点担心这类网站的安全方面是否有一些我需要在进行此类实施时需要注意的事项？

我在我的网站上使用了令牌输入,这是我如何初始化令牌输入:

$(document).ready(function () {           
    var populateValue = document.getElementById('<%= hiddentokenPrePopulate.ClientID%>').value
    $("#<%= tokenEmployee.ClientID%>").tokenInput("../Employee/getEmployeeDetails.ashx", {
        deleteText: "X",
        theme: "facebook",
        preventDuplicates: true,
        tokenDelimiter: ";",
        minChars: 3,
        tokenLimit: 1,
        prePopulate: populateValue
    });
});

脚本停留在这一行:

 prePopulate: populateValue

当我删除这一行时,不会有任何javascript错误,但我需要这个,因为我需要预先填充令牌输入.该populateValue方法是:

[{
    "id": "11566",
    "name": "Smith - White"
}]

有一个javascript错误:

未捕获的TypeError:不能使用'in'运算符在[{"id":"11566","name":"Smith - White"}中搜索'47'

我该如何解决这个错误？

在Rails应用程序我想测试一个引导模式与jQuery的TokenInput场使用水豚用在Rspec的capybara-webkit驱动程序.有问题的部分如下:

click_link 'Create Team Modal'
sleep 1

within('div#modal_popup') do
  fill_in 'input#token-input-team_name', with: 'Fancy team name'
  sleep 1
  fill_in 'input#token-input-team_name', with: '\t'
  sleep 1

  click_button 'Create Team'
end

page.should have_content('Fancy team name')

• 单击按钮以获取模态
• 使用团队名称填写TokenInput
• 模拟Tab键 - 按下以选中它
• 创建团队
• 验证页面上显示的名称

这只适用于所有这些sleep 1; 否则Capybara崩溃have_content,最终导致服务器错误,因为团队名称永远无法正确选择.但是,没有 TokenInput字段的其他Bootstrap模式sleep 1在加载之前不需要.

尽管如此,有没有办法摆脱睡眠并让这一切正常进行？Capybara 2取出wait_until(有充分的理由),因为它将在默认的等待时间内等待测试某些东西......但这似乎没有反映在我的上述测试中; 就好像Capybara在进入/退出这个模态时没有参与等待期.有人对此有经验吗？使用Rails 3.2.10,Rspec 2.12,Capybara 2,capybara-webkit 0.14.0,TokenInput 1.6.

我在jQuery中使用模态弹出控件,弹出窗口有一个由jQuery Tokenize输入插件驱动的输入文本.问题是当我在模态弹出文本框中键入内容时,tokenize插件的搜索结果会隐藏在弹出窗口下.实际上,它们应该在所有控件之上.有人请帮助我,因为我是初学者.

尝试从下面的线程寻求帮助,zindex无法正常工作. https://github.com/loopj/jquery-tokeninput/issues/190

这是我正在使用的输入控件. http://loopj.com/jquery-tokeninput/demo.html

谢谢.

我正在尝试从James Smith的tokenInput Jquery插件创建一个angular.js指令:http://loopj.com/jquery-tokeninput

这是我到目前为止:

antdna = angular.module('Communication', []);

antdna.factory('autoCompleteService', [function() {
    return {
      getSource: function() {
      return [{"id":1, "name":"John Doe"}, {"id":2, "name":"Jane Smith"}];
    }
  }
}]);

antdna.directive('autoComplete', function(autoCompleteService) {
    return {
        restrict: 'A',
        link: function(scope, elem) {
            elem.tokenInput(autoCompleteService.getSource(), {
                crossDomain:false,
                theme: "facebook",
                hintText: "Enter User Name",

                preventDuplicates: true
            });
            }
    };
});

使用以下标记:

<input type="text" name="recipient" ng-model="conversation.recipients" class="messageComposeTextField" auto-complete placeholder="To :" required />

TokenInput工作正常但我的问题是我无法绑定到模型.

{{conversation.recipients}} 

是空白的.

tokenInput插件使用列表元素(ul和li)生成它自己的标记.因此,在检查元素后,我得到:

<ul class="token-input-list-facebook">
  <li class="token-input-token-facebook"><p>John Doe</p><span class="token-input-delete-token-facebook">×</span></li><li class="token-input-input-token-facebook"><input type="text" autocomplete="off" autocapitalize="off" id="token-input-" …

是否存在类似于Facebook的jQuery插件,它建议/使用此标准自动填充:

1. 适用于textarea或contenteditable div.我找到了许多只支持输入字段的插件(例如http://loopj.com/jquery-tokeninput/).
2. 支持自由文本,标签和非标签文本的组合.这是一个只允许在输入后输入标签的例子:http://brianreavis.github.io/selectize.js/ - 这不是免费文本.自由文本的示例是At.js(http://ichord.github.io/At.js),jquery-textcomplete(http://yuku-t.com/jquery-textcomplete)和jquery.mentionsInput(http ://podio.github.io/jquery-mentions-input)
3. 具有退格/删除功能的类似药丸的CSS效果.http://yuku-t.com/jquery-textcomplete/非常接近,但样式示例没有在其他插件中找到的删除功能.示例1具有良好的删除功能.

以下是Zapier的一个例子:

我有一个可以有很多标签的公司模型.它工作正常,但有一次它不起作用.公司模型验证失败的时机.之后:render =>'edit'它不会在视图中显示标签.我怀疑data-pre没有正确地获取数据.我还希望在解决验证时保留标记.

我从这里得到了这个想法:http://railscasts.com/episodes/167-more-on-virtual-attributes

我使用输入令牌控件:http://loopj.com/jquery-tokeninput/

这就是我在公司模型中关于tag_tokens的内容:

  before_save :save_tag_tokens
  attr_writer :tag_tokens
  attr_accessible :tag_tokens

  def tag_tokens
    @tag_tokens || tags.to_json(:only => [:id, :name])
  end

  def save_tag_tokens
    if @tag_tokens
      @tag_tokens.gsub!(/CREATE_(.+?)_END/) do
        Tag.create!(:name => $1.strip.downcase).id
      end
      self.tag_ids = @tag_tokens.split(",")
    end
  end

以下是视图中的代码:

  <div class="input text no-border">
    <% Tag.include_root_in_json = false %>
    <%= company_form.label :tag_tokens, t('form.account.company.edit.company_tags_html')%>
    <%= company_form.text_field :tag_tokens, :id => 'company_tag_tokens', "data-pre" => @company.tag_tokens%>
    <p class="tip"><%= t('form.account.company.edit.tag_tip') %></p>
  </div>

编辑:

好的,所以我看到上面的代码有什么问题.

当我加载编辑页面数据预包含此:data-pre="[{"id":1704,"name":"dump truck"}]".当我提交带有验证错误的表单时,data-pre包含:data-pre="1704".

如果我将代码更改为:

def tag_tokens …

目前我的jquery令牌输入工作正常.

我无法创建令牌,而令牌不在列表中

我在这里看到,这个功能已经实现.但是没有关于我们如何使用它的文档.

任何人都可以帮我提供文档或演示

js_js.js

    $(document).ready(function () {
        $("#job_skills").tokenInput("/jobs/search_job_skills", {
            theme: "facebook",
            preventDuplicates: true,
            hintText: 'Add skills need for job',
            searchingText: 'searching skills...',
            allowCreation: true,
            creationText: 'Add new element'
        });

    });

cons_controller.rb

  def search_job_skills
    search_for_json(Skill)
  end

  def search_for_json(model_search)
    @hash = []

    @search_res = model_search.where(['name LIKE ?', "#{params[:term]}%"])

    @search_res.each do |tag|
      @hash << { id: tag.id,
                 name: tag.name}
    end
    render json: @hash
  end

我正在尝试按照如何在这里实现jquery-tokeninput的说明:

如何使用jquery-Tokeninput和Acts-as-taggable-on

我正在尝试将标签附加到"帖子".我可以使用表单中的文本字段来创建新标签.但是,javascript根本不会发射.好像没有任何代码存在.我没有收到任何错误消息.文本字段仅用作普通文本字段,不会触发任何javascript事件.可能是什么问题？这是我的相关代码:

发布模型

attr_accessible :tag_list
acts_as_taggable_on :tags

发布控制器

def tags 
    query = params[:q]
    if query[-1,1] == " "
      query = query.gsub(" ", "")
      Tag.find_or_create_by_name(query)
    end

    #Do the search in memory for better performance

    @tags = ActsAsTaggableOn::Tag.all
    @tags = @tags.select { |v| v.name =~ /#{query}/i }
    respond_to do |format|
      format.json{ render :json => @tags.map(&:attributes) }
    end
  end

routes#它必须找到tags.json或在我的情况下/products/tags.json得到"posts/tags"=>"posts#tags",:as =>:tags

的application.js

$(function() {
  $("#post_tags").tokenInput("/posts/tags.json", {
    prePopulate:       $("#post_tags").data("pre"),
    preventDuplicates: true,
    noResultsText:     "No results, needs to be created.",
    animateDropdown:   false
  });
});

出于沮丧,我还创建了一个posts.js.coffee文件,看看是不是问题所在: …

我正在尝试在我的应用程序中的表单中添加一个tokeninput jquery字段,允许用户发布状态更新.我希望用户能够将作品(单独的模型)附加到状态更新.我正在使用act_as_taggable_on gem,我的查询指定标签上下文"工作".但是,该字段不会加载任何搜索结果.

我实际上有一个第二个tokeninput字段,允许用户将标签附加到状态更新,就像这个网站使用标签附加到此发行票.它工作正常!我正在尝试镜像该功能以指定搜索工作模型的上下文,并且我正在努力实现.

有任何想法吗？非常感谢您的时间和帮助!这是相关代码:

发布模型

attr_accessible :content, :tag_list, :work_list

acts_as_taggable_on :tags
acts_as_taggable_on :works

后控制器(更新)

def work_list
 query = params[:q]  
 @work_list = ActsAsTaggableOn::Tag.includes(:taggings).where("taggings.context = 'works'").where("tags.name ILIKE ?", "%#{params[:q].downcase.to_s}%").all
 @work_list = @work_list.select { |v| v.name =~ /#{query}/i }
  respond_to do |format|
    format.json { render :json => @work_list.map{|w| {:id => w.name, :name => w.name }}}
  end
end


def tags 
    query = params[:q]
    if query[-1,1] == " "
      query = query.gsub(" ", "")
      ActsAsTaggableOn::Tag.find_or_create_by_name(query)
    end

    #Do the search in memory for better performance …