3

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>
tw1742
  • 1,424
  • 4
  • 18
  • 37

2 Answers2

1

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.

Oussama BEN MAHMOUD
  • 1,442
  • 12
  • 19
  • Yep, that solved it- thanks!. I used bower install typeahead.js to install, what clued you in to try a different version? – tw1742 Dec 06 '15 at 19:04
  • 1
    It's simple I just tried to see what version they use in the official website of the library. By the way I'm using alpaca for almost one year now at work, I find it very useful and simple to use but sometimes when it comes to customization...I hate it so much cause I can't find answers to my questions, plus its github community is not very active. Anyways, I'm not asking you to try other alternatives or native code to generate your forms, stick to it, its very useful and offers lots of things, and you can learn too much from it :) – Oussama BEN MAHMOUD Dec 06 '15 at 20:08
  • Any ideas for this one http://stackoverflow.com/questions/34127172/using-remote-data-for-autocomplete-with-alpaca-forms – tw1742 Dec 07 '15 at 05:46
0

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.

Oussama BEN MAHMOUD
  • 1,442
  • 12
  • 19