{"id":21988057,"url":"https://github.com/maxivak/boostrap_autocomplete_input","last_synced_at":"2025-04-30T11:05:49.628Z","repository":{"id":15891322,"uuid":"78937887","full_name":"maxivak/boostrap_autocomplete_input","owner":"maxivak","description":"Autocomplete/typeahead input ready to be used with Bootstrap 4 and Rails 5","archived":false,"fork":false,"pushed_at":"2023-01-19T07:11:16.000Z","size":116,"stargazers_count":10,"open_issues_count":10,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T11:05:31.419Z","etag":null,"topics":["autocomplete","bootstrap-autocomplete","typeahead"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxivak.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T12:05:35.000Z","updated_at":"2023-12-01T07:29:54.000Z","dependencies_parsed_at":"2023-02-10T21:01:22.302Z","dependency_job_id":null,"html_url":"https://github.com/maxivak/boostrap_autocomplete_input","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxivak%2Fboostrap_autocomplete_input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxivak%2Fboostrap_autocomplete_input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxivak%2Fboostrap_autocomplete_input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxivak%2Fboostrap_autocomplete_input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxivak","download_url":"https://codeload.github.com/maxivak/boostrap_autocomplete_input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251686913,"owners_count":21627497,"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":["autocomplete","bootstrap-autocomplete","typeahead"],"created_at":"2024-11-29T19:15:27.309Z","updated_at":"2025-04-30T11:05:49.596Z","avatar_url":"https://github.com/maxivak.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"bootstrap_autocomplete_input\n=============================\n\nAutocomplete/typeahead input ready to be used with Bootstrap 4 in Rails 5.\n\nFor Bootstrap 3 and Rails 4 - see [bootstrap3_autocomplete_input gem](https://github.com/maxivak/bootstrap3_autocomplete_input).  \n\nFeatures:\n* Adds an input with autocomplete/typeahead compatible with Bootstrap 4.\n* Works with [SimpleForm](https://github.com/plataformatec/simple_form).\n* Uses the autocomplete library from [Bootstrap-3-Typeahead](https://github.com/bassjobsen/Bootstrap-3-Typeahead) that works with Bootstrap 4. \n\n\n# Install\n\n## Gemfile\n\n```ruby\ngem 'simple_form'\ngem 'bootstrap_autocomplete_input'\n\n```\n\nIt assumes that you have Bootstrap 4 in your application. \nFor example, you can use the [bootstrap-rubygem gem](https://github.com/twbs/bootstrap-rubygem).\n\n```ruby\ngem 'jquery-rails', '~\u003e4.2.2'\ngem 'jquery-ui-rails'\ngem 'sass-rails'\n\ngem 'bootstrap', '~\u003e 4.0.0.alpha6'\n\n\n# Tooltips and popovers depend on tether for positioning. If you use them, add tether to the Gemfile:\nsource 'https://rails-assets.org' do\n  gem 'rails-assets-tether', '\u003e= 1.3.3'\nend\n\n# if problems with SSL - use source 'http://insecure.rails-assets.org' \n\n...\n\nend\n```\n\n\n## Javascript\n\nInclude two js files (bootstrap3-typeahead.min, bootstrap-autocomplete-input.min) in your assets file 'app/assets/javascripts/application.js' after 'bootstrap.js'.\n\n```\n//= require jquery2\n//= require jquery_ujs\n//= require bootstrap\n//= require bootstrap3-typeahead.min\n\n//= require bootstrap-autocomplete-input\n//= require bootstrap-autocomplete-input-init\n\n```\n\nfor Turbolinks:\n```\n//= require jquery2\n//= require jquery_ujs\n//= require bootstrap\n//= require bootstrap3-typeahead.min\n\n//= require bootstrap-autocomplete-input\n//= require bootstrap-autocomplete-input-init-turbolinks\n\n```\n\n\n## CSS\n\nAll CSS for autocomplete input is already contained in Bootstrap 3 CSS.\n  \n\nFor example, if you use bootstrap-sass, your css files 'app/assets/stylesheets/application.css.scss' might be like\n\n```\n@import \"bootstrap\";\n```\n\n\n\n## Webpack\n\nuse with Webpacker\n\n```\nyarn add https://github.com/maxivak/bootstrap-autocomplete-input-assets\n\n\n```\n\n* `app/javascript/packs/application.js`\n```\n...\n\n// autocomplete\nimport 'bootstrap-autocomplete-input-assets/src/js/bootstrap3-typeahead.min.js';\nimport 'bootstrap-autocomplete-input-assets/src/js/bootstrap-autocomplete-input.min.js';\n```\n \n\n\n\n\n\n# Usage\n\nAssuming that we have models Order and Client.\n\n```ruby\nclass Order \u003c ActiveRecord::Base\n  belongs_to :client\n\nend\n\nclass Client \u003c ActiveRecord::Base\n  has_many :orders\n\nend\n\n```\n\n\nWe will add autocomplete input to order's form for editing its client.\n\n\n## controller\n\n```ruby\nclass ClientsController \u003c ApplicationController\n   autocomplete :client, :name\n   ...\nend\n```\n\nThis will generate the controller method 'autocomplete_client_name' that returns JSON data with clients.\n\n\n## routes\n\nAdd routes for the generated controller action:\n\n```ruby\nresources :clients do\n  get :autocomplete_client_name, :on =\u003e :collection\nend\n    \n```\n\nThis will generate route with name `autocomplete_client_name_clients` which can be accesedby path autocomplete_client_name_clients_path.\n\n\n## model\n\nspecify what to display as a value in a text field:\n\n```ruby\nclass Client \u003c ActiveRecord::Base\n\tbelongs_to :order\n\n\tdef to_s\n\t\tname\n\tend\nend\n\n\n```\n\n## view\n\n### simple_form\n\nuse :autocomplete input type for the client's field in 'app/views/orders/_form.html.haml'\n\n```ruby\n=simple_form_for @order do |f|\n    = f.error_notification\n\n    = f.input :field1\n    \n    = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url\n\n    = f.button :submit, 'Save', :class=\u003e 'btn-primary'\n```\n\n\n\n# Controller\n\nThe gem has method \"autocomplete\" to generate an action in your controller:\n\n```ruby\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name\n\n```  \nThis will add new action 'autocomplete_client_name' where :client is the model class name and :name is the field name in the  model. The action uses params[:q] for the searching term and queries the database.\n\nThe action returns data in JSON format:\n```text\n[[\"id1\", \"name1\"], [\"id2\", \"name2\"], ..]\n```\nwhich is an array of ids and titles.\n\n\n## Options for controller method\n\n```ruby\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name, { options_hash_here }\n\n```  \n\n\n### class_name\n\n\n\n### column_name\n\n```ruby\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name, { :column_name =\u003e 'title_long' }\n\n```  \n\nIt will search in this column in database.\n\n### extra_columns\n\n```\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name, { extra_columns: [:lastname, :birthdate], column_name: 'fullname' }\n\n```\n\n\n### display_id\n\n* Method used for getting ID of the record. \n* Make sure that columns this method depends on are included in :extra_columns option.\n\n\n### display_value\n\n```ruby\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name, { :display_value =\u003e 'fullname', :full_model=\u003etrue }\n  ...\nend\n```\n\n### where, where_method\n\nAdditional WHERE conditions\n\n* Add additional filter using :scopes option\n```\nautocomplete :client, :name, { :scopes =\u003e [:w_usa, :w_active]}\n\n# scopes in model\nclass Client \u003c ActiveRecord::Base\n  ...\n  # scopes\n  scope :w_usa, -\u003e { where(region_id: 1) }\n  scope :w_active, -\u003e { where(active: true) }\n  \nend\n\n```\n\n\n* Add additional filter using :where option with search condition\n```\nautocomplete :client, :name, { :where =\u003e 'region_id=1' }\n```\n\n* For dynamic search conditions use :where_method option\n```\nclass ClientsController \u003c ApplicationController\n    autocomplete :client, :name, { :where_method =\u003e :w_region }\n    \n    ...\n    \n    def w_region\n        # get value from params\n        v = params[:region_id]\n        \n        if v\n           return \"region_id=#{v}\"\n        end\n         \n        nil \n    end\nend    \n    \n```\n\n\n\n# model\n\nclass Client \u003c ActiveRecord::Base\n\n  def name_with_birthdate\n    firstname+', '+birthdate\n  end\nend\n\n```  \n\nIt will display search results using this method. You must set option :full_model=\u003etrue if you search by one column but you want to display value from other columns.\n\n```ruby\n# JSON data returned by the controller\n[[1, 'Mark Twen, 1980'], [2, 'John Deer, 1985'], ..]\n\n```\n\n\n# Options for input\n\nspecify options:\n\n```ruby\n= simple_form_for @order do |f|\n\n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url, :option_name =\u003e opt_value, :option_name2=\u003evalue2\n\n```\n\n\n## Data source\n\nYou have several options to get data for search:\n - :source =\u003e url - get static data downloaded from URL\n - :source_query =\u003e url - query data with a keyword from URL\n - :source_array =\u003e array - data is stored in local array of strings\n\n\nexamples:\n```ruby\n\n  = f.input :client, :as =\u003e :autocomplete, :source =\u003e autocomplete_client_name_clients_url\n  \n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url\n  \n  = f.input :client, :as =\u003e :autocomplete, :source_array =\u003e ['item1', 'item2', ..]\n```\n\n\n\n\n## Object id\n\nAutocomplete input adds a hidden field to use the id of the selected item.\nUnless you use local array as data source (:source_array), the hidden field for the id is added automatically.\n\n```ruby\n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url\n```\n\nThis will generate HTML like\n```html\n\u003cinput id=\"order_client_id\" type=\"hidden\" value=\"0\" name=\"order[client_id]\"\u003e\n\n\u003cinput id=\"order_client\" name=\"order[client]\"\nclass=\"autocomplete optional\" type=\"text\" value=\"*some value*\" \ndata-source-query=\"http://localhost:3000/clients/autocomplete_client_name\" data-provide=\"typeahead\" data-field-id=\"order_client_id\" \nautocomplete=\"off\"\u003e\n\n```\n\nThis will update the field with id \"order_client_id\" with the id of the selected object. \n\nData posted from the form to the server will contain the id of the selected client (params[:order][:client_id])\n```text\nparams[:order]\n\n{\nclient_id: 5,\nclient: 'client name',\n...\n}\n```\n\n\n\n\nIf you don't want to have a hidden field for object id, set :field_id option to false:\n\n```ruby\n  = f.input :client, :as =\u003e :autocomplete, :source =\u003e autocomplete_client_name_clients_url, :field_id=\u003efalse\n```\n\nThis will generate HTML without a hidden field:\n```html\n\u003cinput id=\"order_client\" name=\"order[client]\"\nclass=\"autocomplete optional\" type=\"text\" value=\"*value*\" \ndata-source=\"http://localhost:3000/clients/autocomplete_client_name\" \ndata-provide=\"typeahead\" \nautocomplete=\"off\"\u003e\n\n```\n\n\n\n## :items\n\nThe max number of items to display in the dropdown. Default is 8.\n```ruby\n= simple_form_for @order do |f|\n\n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url, :items =\u003e 2\n\n```\n\n\n\n## :minLength\nThe minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called. Default is 1.\n\n\n```ruby\n= simple_form_for @order do |f|\n\n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url, :minLength=\u003e3\n\n```\n\n\n\nView the full list of options at https://github.com/bassjobsen/Bootstrap-3-Typeahead. Note that not all options from that list are supported by the current gem.\n\n\n## afterSelect\n\nThe callback function to be execute after an item is selected.\n\n```ruby\n= simple_form_for @order do |f|\n\n  = f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url, :minLength=\u003e3, :afterSelect=\u003e'after_select_client'\n\n\n\n\n:javascript\n  function after_select_client(item){\n    console.log('item is selected');\n    console.log(item);\n\n  }\n\n\n```\n\n\n\n\n# Examples\n\n## Static data from the server\n\n```ruby\n= simple_form_for @order, html: { autocomplete: 'off' } do |f|\n  -#.. other fields..\n  \n  = f.input :client, :as =\u003e :autocomplete, :source =\u003e autocomplete_client_name_clients_url\n  \n```\n\nData will be loaded from the server once after page loads, and all queries to search a string will be against the stored data.\nDo not use this if you have a big number of items for client.\n    \n\n## Query data from the server\n\n\n```ruby\n= f.input :client, :as =\u003e :autocomplete, :source_query =\u003e autocomplete_client_name_clients_url\n```\n\nData will loaded from the server every time you type a new string in the field.\n\n\n## Search by name, display full name in search result\n\n```ruby\nclass ClientsController \u003c ApplicationController\n\n  autocomplete :client, :name, { :display_value =\u003e 'name_with_birthdate', :full_model=\u003etrue }\n  ...\nend\n\n\n# model\n\nclass Client \u003c ActiveRecord::Base\n\n  def name_with_birthdate\n    firstname+', '+birthdate\n  end\nend\n\n\n\n\n```\n\n\n# Customization\n\n## Custom controller action\n\nYou can write your own method to retrieve data instead of\n```\nautocomplete :client, :name\n```\nwhich actually generates method 'autocomplete_client_name'.\n\nSee example - https://github.com/maxivak/bootstrap3_autocomplete_input/wiki/search-custom-method\n\n\n\n\n# Tests\n\n# Development \n\nThis gem uses the ORM library for ActiveRecord models included in [rails3-jquery-autocomplete](https://github.com/peterwillcn/rails4-autocomplete/tree/master/test/lib/rails3-jquery-autocomplete)\n\n\n# TODO\n\nWrite tests\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxivak%2Fboostrap_autocomplete_input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxivak%2Fboostrap_autocomplete_input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxivak%2Fboostrap_autocomplete_input/lists"}