added displayValue option and added to examples and README

README.md

@@ -14,9 +14,13 @@ The simplest usage of the plugin is to simply call the plugin on your jQuery sel
 
 ## Options
 
-`display` (type: `String`)
+`display` (type: `String` or `Function`)
 
-Defines which property of the supplied JSON data will be used as the displayed text.
+Defines which property of the supplied JSON data will be used as the displayed text. If function is defined, the function is called during each row to generate the results box row. The function signature should be: `function (result, key) { .. }`.
+
+`displayValue` (type: `String` or `Function`)
+
+Controls what data is displayed in the input box after a selection has been made from the results box. Can either be a string to define the key of the result data to display or a function with the signature `function (result, key) { .. }` where the return value will be the data inputted into the input box on selection.
 
 `key` (type: `String`)
 
@@ -109,3 +113,35 @@ $(document).ready(function(){
   $("#itemPicker").fuzzyComplete(items, options);
 });
 ```
+
+
+#### Custom ResultsBox & Input Box Selection
+
+You might want to format results in a special format or combine fields from the search results. You can pass a function as the display option to define custom html in the resultbox. You can use displayValue to select what value to display in the input text box.
+
+##### Code
+
+```javascript
+var items = [
+              {"itemCode":"item3442","itemName":"Bag of doorknobs"},
+              {"itemCode":"item3446","itemName":"Blinker fluid"},
+              {"itemCode":"item3479","itemName":"Widgets"},
+              {"itemCode":"item3495","itemName":"Firefly class transport ship"},
+              {"itemCode":"item3400","itemName":"Perpetual motion machine"},
+              {"itemCode":"item3454","itemName":"Penrose triangle"}
+            ];
+var fuseOptions = { keys: ["itemName"] };
+var displayFunction = function(result,id) {
+  return id + ". <b>" + result['itemName'] "</b> - " + result['itemCode'];
+};
+var options = {
+  display: displayFunction,
+  displayValue: "itemName",
+  key: "itemCode",
+  fuseOptions: fuseOptions
+};
+
+$(document).ready(function(){
+  $("#customResultsBoxPicker").fuzzyComplete(items, options);
+});
+```

example/examples.html

@@ -130,6 +130,43 @@ <h3>Code</h3>
 });
     </pre>
 
+    <h2>Custom ResultsBox & Input Box Selection</h2>
+    <p>
+      You might want to format results in a special format or combine fields from the search results. You can pass a function as the display option to define custom html in the resultbox. You can use displayValue to select what value to display in the input text box.
+    </p>
+    <h3>Demo</h3>
+
+    <p>
+      Shop: <input type="text" id="customResultsBoxPicker" name="item">
+      <label for="companyValue">Output:</label> <span class="output"></span>
+    </p>
+
+    <h3>Code</h3>
+    <pre>
+var items = [
+              {"itemCode":"item3442","itemName":"Bag of doorknobs"},
+              {"itemCode":"item3446","itemName":"Blinker fluid"},
+              {"itemCode":"item3479","itemName":"Widgets"},
+              {"itemCode":"item3495","itemName":"Firefly class transport ship"},
+              {"itemCode":"item3400","itemName":"Perpetual motion machine"},
+              {"itemCode":"item3454","itemName":"Penrose triangle"}
+            ];
+var fuseOptions = { keys: ["itemName"] };
+var displayFunction = function(result,id) {
+  return id + ". &lt;b&gt;" + result['itemName'] "&lt;/b&gt; - " + result['itemCode'];
+};
+var options = { 
+  display: displayFunction,
+  displayValue: "itemName",
+  key: "itemCode",
+  fuseOptions: fuseOptions
+};
+
+$(document).ready(function(){
+  $("#customResultsBoxPicker").fuzzyComplete(items, options);
+});
+    </pre>
+
     <script>
       var companies = [
                     {"companyName":"Aperture Science"},
@@ -162,17 +199,19 @@ <h3>Code</h3>
       var fuseOptions3 = { keys: ["itemName"] };
       var options3 = { display: "itemName", key: "itemCode", fuseOptions: fuseOptions3 };
 
+      var options4 = { display: function(result,id) { return id + ". <b>" + result['itemName'] + "</b> - " + result['itemCode']; }, displayValue: "itemName",key: "itemCode", fuseOptions: fuseOptions3 };
+
       $(document).ready(function(){
         $("#companyPicker").fuzzyComplete(companies);
         $("#airportPicker").fuzzyComplete(airports, options2);
         $("#itemPicker").fuzzyComplete(items, options3);
+        $("#customResultsBoxPicker").fuzzyComplete(items, options4);
 
         $('input').on('keyup blur', function() {
           $(this).parent().find(".output").html($(this).parent().find("select").val());
         });
       });
     </script>
   </div>  
-
 </body>
-</html>
+</html>

src/js/fuzzycomplete.js

@@ -46,7 +46,7 @@
 
       function selectCurrent() {
         selectBox.val(resultsBox.children('.selected').first().data('id'));
-        searchBox.val(resultsBox.children('.selected').first().text());
+        searchBox.val(resultsBox.children('.selected').first().data('displayValue'));
       }
 
       searchBox.keydown(function(e) {
@@ -123,10 +123,17 @@
                                selectCurrent();
                                resultsBox.hide();
                              });
-          if (typeof options.displayFunction === 'function') {
-            resultsRow = resultsRow.html( options.displayFunction(result, i) );
+          if (typeof options.display === 'function') {
+            resultsRow.html( options.display(result, i) );
           } else {
-            resultsRow = resultsRow.text(result[options.display]);
+            resultsRow.text(result[options.display]);
+          }
+          if (typeof options.displayValue === 'function') {
+            resultsRow.data('displayValue', options.displayValue(result, i));
+          } else if (typeof options.displayValue === 'string') {
+            resultsRow.data('displayValue', result[options.displayValue]);
+          } else {
+            resultsRow.data('displayValue', resultsRow.text());
           }
           resultsBox.append(resultsRow);
         });