Hello, this is soulheart. Easy remote data source for autocomplete

Set up a remote data source with zero backend programming.

Deploy to Heroku with the click of a button. Upload a tsv with a text column. Start using it.

Here is how to deploy the above example, step by step:

1. Deploy to Heroku by clicking the button
   This requires a verified Heroku account—you will have to add a payment method to Heroku even though you won't be charged

2. Install the Heroku CLI and open up a terminal window.

3. Run this command in the terminal window:

   heroku run -a sh-example-simple soulheart load https://raw.githubusercontent.com/sethherr/soulheart/master/examples/manufacturers_simple.tsv

   Replace sh-example-simple with the name of your app on Heroku

4. Add Selectize by downloading the source files and adding them to your page:

   <script type="text/javascript" src="selectize.js"></script>
   <link rel="stylesheet" type="text/css" href="selectize.css" />
   

5. Use this javascript to hook up the select box with selectize:

   $('#sh-example-simple-select-selectize').selectize({
     preload: true,
     valueField: 'text',
     labelField: 'text',
     searchField: 'text',
     load: function(query, callback) {
       $.ajax({
         url: "https://sh-example-simple.herokuapp.com" + "/?q=" + encodeURIComponent(query),
         type: 'GET',
         error: function() {
           callback();
         },
         success: function(res) {
           callback(res.matches.slice(0, 10));
         }
       });
     }
   });
   

   Replace sh-example-simple in http://sh-example-simple.herokuapp.com with the name of your app on Heroku

So, for example, let’s say you want to select bicycle manufacturers using selectize - but you want to prioritize more common manufacturers.

Some manufacturers are more popular than others - and since we expect people to be searching for more popular ones more frequently, it’s important to make them show up first — for example, if you input a “t”, the first manufacturer to select should be “Trek”, not “Tacx”.

Items with equal scores are ordered alphanumerically. So in the manufacturers example above, manufacturers are grouped in broad levels of popularity - 10, 100, 250 & 500 - higher numbers show up first. This example uses manufacturers.tsv

Set a priority to organize the way items are ordered.

Show codeHide code

Search for items in only one category by adding a category parameter:

This example uses categories.json, which includes a whole host of options from the Bike Index API. Say that, instead of searching the full list, you only want to view options for handlebar types.

All categories are available at the Heroku app’s url + /categories. So start by pulling options into the category select box from:

https://sh-example-categories.herokuapp.com/categories

When the category changes, you want to grab the value and add it to your url as a query. This becomes the source for the items select box:

https://sh-example-categories.herokuapp.com?categories=handlebar%20types

Search for items in multiple categories by separating them with commas:

https://sh-example-categories.herokuapp.com?categories=colors,component%20types

Show codeHide code

Any column that isn’t category, text or priority will be returned as well.

Here, the emoticons.json example file includes id, image_url and source fields. These values are returned and available for incorporation into the select box.

Through the magic of the selectize rendering options, emoticon images are displayed in the dropdown along with their text, category and source details:

Once an item is selected, we can opt to display only its image:

Show codeHide code