{"id":4106,"date":"2016-08-15T13:52:58","date_gmt":"2016-08-15T13:52:58","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=4106"},"modified":"2023-02-16T15:59:23","modified_gmt":"2023-02-16T10:29:23","slug":"jquery-tag-it-integration-with-rails","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/","title":{"rendered":"jQuery Tag-it -Integration with rails"},"content":{"rendered":"\n<p>Sometimes we come across situations where we need to add tags to some items e.g. there is an online shopping website which sells various items such as clothes, electronics, books, mobile accessories etc. <\/p>\n\n\n\n<p>Now if there are items such as earphones, power banks, data cables etc. these all can be commonly tagged as mobile accessories. Tagging makes it easy to group the items and also facilitates searching. So when any user searches for the mobile accessories we can show all the items related to this tag.<\/p>\n\n\n\n<p><a href=\"http:\/\/aehlke.github.io\/tag-it\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery tag-it<\/a>&nbsp;is an excellent&nbsp;<a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a>&nbsp;plugin with auto-complete support. Also, it is very easy to integrate with rails app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<p>First of all, you will need to download&nbsp;<b>jQuery UI<\/b>&nbsp;plugin files&nbsp;<a href=\"https:\/\/jqueryui.com\/resources\/download\/jquery-ui-1.12.0.zip\" target=\"_blank\" rel=\"noopener noreferrer\">from here<\/a>&nbsp;and&nbsp;<b>tag-it<\/b>&nbsp;plugin files&nbsp;<a href=\"http:\/\/github.com\/aehlke\/tag-it\/zipball\/master\" target=\"_blank\" rel=\"noopener noreferrer\">from here<\/a>.<\/p>\n\n\n\n<p>Then copy&nbsp;<b><i>jquery-ui.css, jquery-ui.structure.css<\/i><\/b>&nbsp;and&nbsp;<b><i>jquery-ui.theme.css<\/i><\/b> from the&nbsp;<i>jQuery UI<\/i>&nbsp;folder and&nbsp;<b><i>jquery.tagit.css<\/i><\/b>&nbsp;from the&nbsp;<i>Tag it<\/i>&nbsp;folder to your rails app and require them in you manifest CSS file in the following order.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/7ef553f28e1d83b11f48e753fdf1be02.js\"><\/script><\/p>\n\n\n\n<p>After that copy all the images stored in the&nbsp;<b>images<\/b>&nbsp;folder in the jQuery UI folder. Create a directory&nbsp;<b>app\/assets\/images\/images<\/b>&nbsp;and paste all images files.<\/p>\n\n\n\n<p>If you are working with Rails 4, you need to rename the file from&nbsp;<b><i>jquery-ui.css<\/i><\/b> to&nbsp;<b><i>jquery-ui.scss<\/i><\/b>&nbsp;and&nbsp;<b><i>jquery-ui.theme.css<\/i><\/b>&nbsp;to <b><i>jquery-ui.theme.scss<\/i><\/b>&nbsp;then change all the image URL path to asset-url in these files as follows<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">background-image: asset-url(\"images\/ui-icons_444444_256x240.png\");<\/pre>\n\n\n\n<p>After this, copy&nbsp;<b><i>jquery-ui.js<\/i><\/b>&nbsp;and&nbsp;<b><i>tag-it.js<\/i><\/b>&nbsp;and require them in the following order in your manifest js file.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/4154d1e89709fcdd816007a36a4e59a5.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Usage<\/h3>\n\n\n\n<p>Now create a view file, add the tags in the&nbsp;<b>ul,<\/b>&nbsp;give it an id and initialize the tag-it with this specific id only.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/4a703299af1b7a82a531425b40bacdcd.js\"><\/script><\/p>\n\n\n\n<p>That&#8217;s it! Isn&#8217;t it really simple!<\/p>\n\n\n\n<p>Now all the tags written in the&nbsp;<b><i>&lt;li&gt;&lt;\/li&gt;<\/i><\/b> tags will come pre-loaded and you can add new tags as you want. Also when you try to add any tag which you have already added it will highlight the tag and now allow to add you second time. This is cool!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"53\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/li-tag.png\" alt=\"li tag\" class=\"wp-image-14485\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/li-tag.png 528w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/li-tag-300x30.png 300w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/figure>\n\n\n\n<p>You can easily remove the tags by using&nbsp;<b>backspace<\/b> or by clicking at the&nbsp;<b>cross icon<\/b>&nbsp;beside the added tags. You can find the working demo of it on&nbsp;<a href=\"http:\/\/aehlke.github.io\/tag-it\/\" target=\"_blank\" rel=\"noopener noreferrer\">this link<\/a>. Also you can add various themes and do as many customizations as you want.<\/p>\n\n\n\n<p>Various parameters can also be passed during the tag-it initialization. I have found some really interesting ones which I have incorporated into my project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">availableTags(Array)<\/h3>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/7657a1bd6ea4a20a4392b974cb97652b.js\"><\/script><\/p>\n\n\n\n<p>Tags which are added in the array of&nbsp;<b><i>availableTags<\/i><\/b>&nbsp;will be given as suggestions in auto-complete.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"251\" height=\"167\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/available-tags.png\" alt=\"available tags\" class=\"wp-image-14486\"\/><figcaption class=\"wp-element-caption\">Suggestions for auto complete<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">tagLimit (integer)<\/h3>\n\n\n\n<p>This will limit the number of tags added by the user.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/e1d8146408f6d39e9096ed890ac984e3.js\"><\/script><\/p>\n\n\n\n<p>This doesn&#8217;t allow the user to add tags more than the specific limit, but wait it also doesn&#8217;t show any appropriate message as well, this is where the callbacks come into the picture.<\/p>\n\n\n\n<p>We can use&nbsp;<b><i>onTagLimitExceeded<\/i><\/b> callback for this.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/6d6dd4832b2bbced7c1b473a8dc0021f.js\"><\/script><\/p>\n\n\n\n<p>Now when you try to add more than specified tags it will show alert messages.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"271\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/alert-1024x271.png\" alt=\"alert\" class=\"wp-image-14487\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/alert-1024x271.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/alert-300x79.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/alert-768x203.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/alert.png 1158w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Alert for the tag limit exceeded<\/figcaption><\/figure>\n\n\n\n<p>If you want to do something special before\/after the tag is added\/removed you can easily do it with&nbsp;<b>beforeTagAdded<\/b>\/<b>afterTagAdded<\/b>&nbsp;and&nbsp;<b>beforeTagRemoved<\/b>\/<b>afterTagRemoved<\/b>&nbsp;callbacks.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/8905c2143d86377fbaf4a45756479d0d.js\"><\/script><\/p>\n\n\n\n<p>You can find all the&nbsp;<b>options<\/b>&nbsp;at&nbsp;<a href=\"https:\/\/github.com\/aehlke\/tag-it#options\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/github.com\/aehlke\/tag-it#options<\/a>,&nbsp;<b>events<\/b>&nbsp;at&nbsp;<a href=\"https:\/\/github.com\/aehlke\/tag-it#events\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/github.com\/aehlke\/tag-it#events<\/a>&nbsp;and&nbsp;<b>methods<\/b>&nbsp;at&nbsp;<a href=\"https:\/\/github.com\/aehlke\/tag-it#methods\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/github.com\/aehlke\/tag-it#methods<\/a>.<\/p>\n\n\n\n<p>This helps us adding the tags in a simple, elegant and efficient way.<\/p>\n\n\n\n<p>You can find the full source code at&nbsp;<a href=\"https:\/\/github.com\/AnkurVyas-BTC\/tag-it-example\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/github.com\/AnkurVyas-BTC\/tag-it-example<\/a>.<\/p>\n\n\n\n<p>Thanks for reading! Please hit the heart button if you enjoyed reading&nbsp;\ud83d\ude42<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><i>At&nbsp;<a href=\"https:\/\/www.botreetechnologies.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>BoTree Technologies<\/b><\/a>, we build web and&nbsp;mobile applications&nbsp;to add value to our client\u2019s business. We align ourselves to ensure that our client benefits the most out of our engagement.<\/i><\/p>\n\n\n\n<p><i>We work in\u00a0<a href=\"https:\/\/www.botreetechnologies.com\/ruby-on-rails-development\" target=\"_blank\" rel=\"noreferrer noopener\">Ruby on Rails<\/a>,\u00a0<a href=\"https:\/\/www.botreetechnologies.com\/python\" target=\"_blank\" rel=\"noopener noreferrer\">Python<\/a>, Java,\u00a0<a href=\"https:\/\/www.botreetechnologies.com\/react-native-development\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a>, Android, iOS and\u00a0<a href=\"https:\/\/www.botreetechnologies.com\/robotic-process-automation\" target=\"_blank\" rel=\"noopener noreferrer\">RPA<\/a>\u00a0as well.<\/i><\/p>\n\n\n\n<p><i><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Drop us a line<\/a>&nbsp;to discuss how can we help take your business to the next level.<\/i><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">References:<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><a href=\"https:\/\/github.com\/aehlke\/tag-it\" target=\"_blank\" rel=\"noopener noreferrer\"><b>aehlke\/tag-it<\/b><br><i>tag-it &#8211; A jQuery UI plugin to handle multi-tag fields as well as tag suggestions\/autocomplete.<\/i>github.com<\/a><\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><a href=\"http:\/\/aehlke.github.io\/tag-it\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>jQuery Tag-it!<\/b><br><i>Actual extensible and idiomatic jQuery UI widget.<\/i>aehlke.github.io<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes we come across situations where we need to add&#8230;<\/p>\n","protected":false},"author":9,"featured_media":14484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,10],"tags":[],"class_list":["post-4106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>jQuery Tag-it -Integration with rails<\/title>\n<meta name=\"description\" content=\"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Tag-it -Integration with rails\" \/>\n<meta property=\"og:description\" content=\"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-15T13:52:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-16T10:29:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"852\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ankur Vyas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ankur Vyas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\"},\"author\":{\"name\":\"Ankur Vyas\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"headline\":\"jQuery Tag-it -Integration with rails\",\"datePublished\":\"2016-08-15T13:52:58+00:00\",\"dateModified\":\"2023-02-16T10:29:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\"},\"wordCount\":772,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg\",\"articleSection\":[\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\",\"name\":\"jQuery Tag-it -Integration with rails\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg\",\"datePublished\":\"2016-08-15T13:52:58+00:00\",\"dateModified\":\"2023-02-16T10:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"description\":\"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg\",\"width\":852,\"height\":479,\"caption\":\"jQuery Tag-it -Integration with rails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Tag-it -Integration with rails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\",\"name\":\"Ankur Vyas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"caption\":\"Ankur Vyas\"},\"description\":\"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Tag-it -Integration with rails","description":"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Tag-it -Integration with rails","og_description":"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2016-08-15T13:52:58+00:00","article_modified_time":"2023-02-16T10:29:23+00:00","og_image":[{"width":852,"height":479,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg","type":"image\/jpeg"}],"author":"Ankur Vyas","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Ankur Vyas","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/"},"author":{"name":"Ankur Vyas","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"headline":"jQuery Tag-it -Integration with rails","datePublished":"2016-08-15T13:52:58+00:00","dateModified":"2023-02-16T10:29:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/"},"wordCount":772,"commentCount":0,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg","articleSection":["Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/","url":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/","name":"jQuery Tag-it -Integration with rails","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg","datePublished":"2016-08-15T13:52:58+00:00","dateModified":"2023-02-16T10:29:23+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"description":"jQuery tag-it is an excellent jQuery UI plugin with auto-complete support. Also it is very easy to integrate with rails app.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-tag-it.jpg","width":852,"height":479,"caption":"jQuery Tag-it -Integration with rails"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/jquery-tag-it-integration-with-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery Tag-it -Integration with rails"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5","name":"Ankur Vyas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","caption":"Ankur Vyas"},"description":"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=4106"}],"version-history":[{"count":2,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4106\/revisions"}],"predecessor-version":[{"id":18619,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/4106\/revisions\/18619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/14484"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=4106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=4106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=4106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}