This demo shows how to build autocomplete functionality with pg_search and select2. The main thing to note is that obviously pg_search support only Postgres. However, this is the easiest and quickest to implement solution.
To view the demo:
- Create "autocomplete" PG database
- Create config/local_env.yml file with the following content:
PG_PASSWORD: 'YOUR_PG_PASSWORD_HERE' - bundle install
- rails db:migrate
- rails db:seed (this will populate DB with totally random users)
- rails s
- Navigate to http://localhost:3000
- Enter a couple of characters
- Select any user
- Click Go and observe the user's id that was chosen among some other params. User's id can be accessed
as
params[:user].
For this demo there is a User model with these attributes:
- fname
- lname
- domain
Searching is done against fname and lname.
- select2.js and underscore.js inside the javascripts dir - these are the libraries and have to be added
- search.coffee - this is the main JS file to enable autocomplete feature. DO NOT FORGET to require these files in your application.js. Libraries should be required BEFORE the search.coffee
- select2.css inside the stylesheets. This is the basic styling for select2 dropdown
- Gems. pg, pg_search and jbuilder are required
- The form. Of course, the form will vary, but note how the select_tag is being used.
- The model. It has to be equipped with pg_search
- The controller to do the actual searching. Note the use of the scope that was defined in the model. Also note that it has to respond with JSON format.
- The JSON itself (generated by jbuilder). This JSON is then parsed inside the search.coffee file
- The routes will vary but you have to setup some route for
/users.json, like this one