CODEWITHSUNDEEP
javascriptautocompletetypeahead.jsalpacajs
tw1742
tw1742

Reputation: 1484

Autocomplete displays key and value using Alpaca forms

I'm using Alpaca forms to generate a form and one field will have an autocomplete. I'm testing Example 7 from http://www.alpacajs.org/docs/fields/text.html to see how this works. However, in my form the autocomplete displays as {"value":"Cloud CMS"} vs. Cloud CMS on the Alpaca site. I also tried directly specifying the autocomplete values as an array. Below is my code, note typeahead.js is installed locally.

<html>
    <head>
        <title>Alpaca-Autocomplete Form</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css" rel="stylesheet" />
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script>
        <!-- typeahead.js https://github.com/twitter/typeahead.js -->
        <script src="bower_components/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script>
        <script src="bower_components/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script>    
    </head>
    <body>
    <div id="field7"> </div>
    <script>
        var companies = ["Cloud CMS", "Amazon", "HubSpot"];
        $("#field7").alpaca({
            "schema": {
                "type": "string"
            },
            "options": {
                "type": "text",
                "label": "Company Name",
                "helper": "Select the name of a cloud computing company",
                "typeahead": {
                    "config": {
                        "autoselect": true,
                        "highlight": true,
                        "hint": true,
                        "minLength": 1
                    },
                    "datasets": {
                        "type": "local",
                        "source": companies
                        // "source": function(query) {
                        //     var companies = ["Cloud CMS", "Amazon", "HubSpot"];
                        //     var results = [];
                        //     for (var i = 0; i < companies.length; i++) {
                        //         var add = true;
                        //         if (query) {
                        //             add = (companies[i].indexOf(query) === 0);
                        //         }
                        //         if (add) {
                        //             results.push({
                        //                 "value": companies[i]
                        //             });
                        //         }
                        //     }
                        //     return results;
                        // }
                    }
                }
            }
        });
    </script>
    </body>
</html>

Upvotes: 3

Views: 1676

Answers (2)

Oussama BEN MAHMOUD
Oussama BEN MAHMOUD

Reputation: 1472

here's another solution if you want to use the latest version of Typeahead :

$("#field7").alpaca({
   "schema": {
      "type": "string"
   },
   "options": {
      "type": "text",
      "id": "companyField",
      "label": "Company Name",
      "helper": "Select the name of a cloud computing company"
  }
});

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
     var matches, substringRegex;

     // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

   cb(matches);
  };
};

var companies = ["Cloud CMS", "Amazon", "HubSpot"];

$('#companyField').typeahead({
  hint: true,
  highlight: true,
  minLength: 2
}, {
 name: 'companies',
 source: substringMatcher(companies)
});

You have to add first a name or an id to your field and remove typeahead config from your alpaca code, then use the code provided by typeahead (link) to apply autocompletion to your field.

I you want to use the method with the previous version of typeahead you have to change the substringMatcher function like this :

// ...
$.each(strs, function(i, str) {
     if (substrRegex.test(str)) {
         matches.push({
            value: str
         });
     }
});
// ...

Here's a jsfiddle for this. Using this technique I still have some styling issues, but I think there's is a workaround for this.

Upvotes: 0

Oussama BEN MAHMOUD
Oussama BEN MAHMOUD

Reputation: 1472

I tried to play around with your code, the problem is the version of typeahead you are using. I changed the version to version 0.10.5 and it worked, try to use this version and tell me if it works.

Have a good day.

Upvotes: 1

Related Questions