ADD: editableAtwhoQueryAttrs options

for adding customize attrs to editable querying helper: `.atwho-query`
fix #253

dist/js/jquery.atwho.js

@@ -558,7 +558,8 @@ EditableController = (function(_super) {
     matched = this.callbacks("matcher").call(this, this.at, _range.toString(), this.getOpt('startWithSpace'));
     if ($query.length === 0 && typeof matched === 'string' && (index = range.startOffset - this.at.length - matched.length) >= 0) {
       range.setStart(range.startContainer, index);
-      range.surroundContents(($query = $("<span class='atwho-query'/>", this.app.document))[0]);
+      $query = $("<span/>", this.app.document).attr(this.getOpt("editableAtwhoQueryAttrs")).addClass('atwho-query');
+      range.surroundContents($query.get(0));
       lastNode = $query.contents().last().get(0);
       if (/firefox/i.test(navigator.userAgent)) {
         range.setStart(lastNode, lastNode.length);
@@ -1007,7 +1008,8 @@ $.fn.atwho["default"] = {
   maxLen: 20,
   displayTimeout: 300,
   delay: null,
-  spaceSelectsMatch: false
+  spaceSelectsMatch: false,
+  editableAtwhoQueryAttrs: {}
 };
 
 

spec/javascripts/content_editable.spec.coffee

@@ -4,7 +4,10 @@ describe "content editable", ->
 
 	beforeEach ->
 		loadFixtures "inputors.html"
-		$inputor = $("#editable").atwho(at: "@", data: ["Jobs"])
+		$inputor = $("#editable").atwho
+			at: "@",
+			data: ["Jobs"]
+			editableAtwhoQueryAttrs: {class: "hello", "data-editor-verified":true}
 		app = getAppOf $inputor
   afterEach ->
     $inputor.atwho 'destroy'
@@ -19,11 +22,17 @@ describe "content editable", ->
 		app.controller().view.$el.find('ul').children().first().trigger('click')
 		expect($inputor.text()).toContain('@Jobs')
 
-	it "unwrapp span.atwho-query after match failed", ->
+	it "unwrap span.atwho-query after match failed", ->
 		simulateTypingIn $inputor
 		expect $('.atwho-query').length
 			.toBe 1
 		$('.atwho-query').html "@J "
 		simulateTypingIn $inputor, "@", 3
 		expect $('.atwho-query').length
 			.toBe 0
+
+	it "wrap span.atwho-query with customize attrs", ->
+		# for #235
+		simulateTypingIn $inputor
+		expect $('.atwho-query').data('editor-verified')
+			.toBe true

src/api.coffee

@@ -42,3 +42,4 @@ $.fn.atwho.default =
   displayTimeout: 300
   delay: null
   spaceSelectsMatch: no
+  editableAtwhoQueryAttrs: {}

src/editableController.coffee

@@ -86,7 +86,10 @@ class EditableController extends Controller
     if $query.length == 0 and typeof matched is 'string' \
         and (index = range.startOffset - @at.length - matched.length) >= 0
       range.setStart range.startContainer, index
-      range.surroundContents ($query = $ "<span class='atwho-query'/>", @app.document)[0]
+      $query = $ "<span/>", @app.document
+        .attr @getOpt "editableAtwhoQueryAttrs"
+        .addClass 'atwho-query'
+      range.surroundContents $query.get 0
       lastNode = $query.contents().last().get(0)
       if /firefox/i.test navigator.userAgent
         range.setStart lastNode, lastNode.length