{"id":17579087,"url":"https://github.com/mlms13/fancyarea","last_synced_at":"2025-04-28T15:14:49.792Z","repository":{"id":68735041,"uuid":"10978458","full_name":"mlms13/FancyArea","owner":"mlms13","description":"Is it just a textarea? No. It's much fancier than that.","archived":false,"fork":false,"pushed_at":"2013-09-18T00:05:33.000Z","size":283,"stargazers_count":10,"open_issues_count":7,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-28T15:14:43.406Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://codepen.io/mlms13/full/rCnDK","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlms13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-26T20:35:01.000Z","updated_at":"2022-01-11T21:10:46.000Z","dependencies_parsed_at":"2023-02-20T23:50:29.066Z","dependency_job_id":null,"html_url":"https://github.com/mlms13/FancyArea","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FFancyArea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FFancyArea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FFancyArea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FFancyArea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlms13","download_url":"https://codeload.github.com/mlms13/FancyArea/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251336389,"owners_count":21573188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T00:43:40.756Z","updated_at":"2025-04-28T15:14:49.774Z","avatar_url":"https://github.com/mlms13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FancyArea\n\nIs it just a textarea? No. It's much fancier than that. A FancyArea is a great way to handle a user-entered list of items. [See it in action on Codepen.](http://codepen.io/mlms13/full/rCnDK)\n\n## Featuring:\n\n- Immediate feedback when the user enters an item\n- Validation before items are added\n- Deleting and editing of existing items\n- Simple integration with Twitter's [typeahead.js](http://twitter.github.io/typeahead.js/) (as well as [bootstrap-typeahead](http://twitter.github.io/bootstrap/javascript.html#typeahead))\n- Custom events when an item is added, removed, or changed\n\n## Getting Started\n\n### How do I make one?\n\nIt's easy! As long as you're using jQuery 1.7 or newer, just throw a `textarea` on your page, and hit it with this Javascript:\n\n```\n$('textarea').fancyArea();\n```\n\nSuddenly, your boring `textarea` is transformed into a slick FancyArea.\n\n### How do I style it?\n\nYour new FancyArea is actually a `div` styled to look like a `textarea`. By default, it has a class of `fancy-area` (and `fancy-area-focus` when the input is focused), but you can change these classes when you initialize your FancyArea.\n\nFancyArea will also absorb the ID and any classes that applied to the original `textarea`.\n\nYou'll probably want to give a `width` (or `min-width`) to FancyArea unless you want a full-width text box. Unlike the original `textarea`, the browser won't limit the width of your FancyArea by default.\n\n### How do I find the contents of my FancyArea?\n\nWhen the content is changed, several custom jQuery events are triggered. You can listen to these events and use the data supplied to the callback function.\n\nImmediately after creating a FancyArea, you can chain an event listener like this:\n\n```\n$('textarea').fancyArea().on('fancyItemChanged', function (event, items) {\n  // the `items` argument contains an array of all items as strings\n});\n```\n\nTwo other custom events, `fancyItemAdded` and `fancyItemRemoved`, also pass data to the callback function.\n\nIf you don't want to keep track of the data with Javascript, it's all stored in `input` elements, so it will be submitted to the server when the form is submitted.\n\n### How can I validate the input?\n\nWhen invoking a FancyArea, you can pass a custom validation function. This function will be run before an item is added or changed. If the function returns false, the item will not be added. The default validation function does not allow empty strings to be added. The following would only allow items that start with \"m\":\n\n```\n$('textarea').fancyArea({\n  validate: function (text) {\n    return text.indexOf('m') === 0;\n  }\n});\n```\n\n### How do I add typeahead suggestions?\n\nThe `demo.html` file is a great place to start. When the FancyArea plugin creates an `input`, a custom event is triggered on the `document` and a jQuery object representing the input is passed to the callback function.  Using typeahead.js, you can initialize typeahead functionality like this:\n\n```\n$(document).on('fancyInputCreated', function (event, $input) {\n  $input.typeahead();\n});\n```\n\nBecause typeahead.js doesn't allow you to clear the `input` by simply setting `.val('')`, you'll need to manually empty the query each time FancyArea adds an item:\n\n```\n$('textarea').fancyArea().on('fancyItemAdded', function () {\n  $('.fancy-text-entry').typeahead('setQuery', '');\n});\n```\n\nAgain, a more detailed example is available in the `demo.html` file.\n\n## How is it licensed?\n\nMIT-style. Like this:\n\n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\n\u003e The above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Ffancyarea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlms13%2Ffancyarea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Ffancyarea/lists"}