[WIP] Autocomplete brands and models

The database is crowded with bogus entries (see #90). Here's a prototype of autocompletion for watch brands and models. You can try it out by typing 'j'  in the brand, it will suggests 'Java', 'Javascript'  and 'Clojure'  because they all contain a 'j'. If 'Java' is choosen, then a 'n' in the model input will suggests 'Niark'. It also works for 'Scala' -> 'Plop'.

@VS2000, I need supported brands and models of each brand to complete this.

application/controllers/Measures.php

@@ -134,6 +134,9 @@ public function new_watch() {
 		$this->event->add(ADD_WATCH_LOAD);
 
 		$this->_headerData['headerClass'] = 'blue';
+		array_push($this->_headerData['javaScripts'],
+			"jquery-ui.min", "watch.autocomplete");
+
 		$this->load->view('header', $this->_headerData);
 
 		$this->load->view('measure/new-watch', $this->_bodyData);

application/views/measure/new-watch.php

@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
+
 <div class="container container-fluid content first">
     <div class="row">
         <div class="col-md-12"><center><h1>Add a new watch</h1></center></div>
@@ -8,14 +10,14 @@
                 <div class="form-group">
                     <label for="brand" class="col-sm-3 control-label">Brand <i>*</i></label>
                     <div class="col-sm-9">
-                        <input type="text" class="form-control" name="brand" placeholder="Jaeger-LeCoultre">
+                        <input id="brand" type="text" class="form-control" name="brand" placeholder="Jaeger-LeCoultre">
                         <span class="watch-error brand-error">This field is required.</span>
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="name" class="col-sm-3 control-label">Model</label>
                     <div class="col-sm-9">
-                        <input type="text" class="form-control" name="name" placeholder="Duometre">
+                        <input id="model" type="text" class="form-control" name="name" placeholder="Duometre">
                     </div>
                 </div>
                 <div class="form-group">

assets/js/watch.autocomplete.js

@@ -0,0 +1,44 @@
+$(function() {
+    var availableBrands = [
+      "ActionScript",
+      "AppleScript",
+      "Asp",
+      "BASIC",
+      "C",
+      "C++",
+      "Clojure",
+      "COBOL",
+      "ColdFusion",
+      "Erlang",
+      "Fortran",
+      "Groovy",
+      "Haskell",
+      "Java",
+      "JavaScript",
+      "Lisp",
+      "Perl",
+      "PHP",
+      "Python",
+      "Ruby",
+      "Scala",
+      "Scheme"
+    ];
+
+    var availableModelsByBrand = {};
+    availableModelsByBrand["Java"] = ["Niark"];
+    availableModelsByBrand["Scala"] = ["Plop"];
+
+    $( "#brand" ).autocomplete({
+      source: availableBrands,
+      autoFill: true,
+      select: function (event, ui){
+        console.log(ui.item.value);
+        var brand = ui.item.value;
+
+        $("#model").autocomplete({
+          autoFill: true,
+          source: availableModelsByBrand[brand]
+        });
+      }
+    });
+  });