Lookup suggestions enhancements

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<script src="https://cdn.cfront-cloud.co.uk/scripts/dev/koa1.0/cf.jq.ajax.js"></script>
<script src="https://cdn.cfront-cloud.co.uk/scripts/dev/koa1.0/cf.linq.js"></script>
<input data-bind="lookup: { 
  boundField: Bait, 
  source: ajaxSource,
  mode: 'suggestions'
}"/>

<input />

<div data-bind="text: Bait">

</div>

CSS

input { padding: 10px; }

JavaScript

/*
 Copyright 2014 cFront Software Ltd, http://www.cfront.co.uk
 Free for any use, provided this copyright notice is maintained.
*/
// =====================================================================================================================================================================
// =====================================================================================================================================================================
// jQueryUI bindings additional VERSION 2 =========================================================================================================================================
// =====================================================================================================================================================================
// 
/*
	Config object:
	
	boundField = 			observable to update
	source =					data source for suggestions - see below *
	
	valueField =  		object field to update observable with
	textField  =  		object field to update display with 
	selectObjects  =	if true, set the observable to the actual selected object, not a property of it
		- allowCreate = if true AND selectObjects true, then if a non-empty item not in the list is entered, an object 
		                { ID: -1, Name: <entered text> } will be set on the bound field
										
	mode =   					if 'suggestions', then the datasource is a list of strings available as suggestions for the boundField
	options = 				passed to jQuery AutoComplete as options
	
	
	
	* SOURCE:
	
	Can be simple or observable array, in which case all filtering obviously done client side.
	
	OR, for larger datasets, can be a function with the following signature:
	
		$data.function($data, object:{ 
			term: 'text being searched',
			success: function(data) - return data array,
			fail: function() - call on callback failure
		});

*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -...