jQuery Autocomplete

jQuery Autocomplete

by Camille Bechayda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css">
<input id="id1" type="text" />
<div id="selected1">  
</div>
<input type=button id=btn style="float:right" />

CSS

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

JavaScript

$('#id1').autocomplete({
	  serviceUrl: 'https://m.rm.dk/staging/api/v1/Search', 
    ajaxSettings : {
    	headers: {       	        	
          'Authorization': "tokenValue"
      },
      //crossDomain: true,
      cache: false,                
      //xhrFields: { withCredentials: true }
    },
    paramName: 'q',
    deferRequestBy  : 200,
    autoSelectFirst: true,
    onSearchStart: function (query) {    			
          var options = {};
      		options.clear = true;
          $('#id1').autocomplete('setOptions', options)
    },
    formatResult: function (suggestion, currentValue) {         
      		return suggestion.data + '<br>' + suggestion.value;
    },
    transformResult: function(responseString) {    
    	  var response = JSON.parse(responseString);
        var results = response.results;        
        return      {    
    			query: "Unit",
    			suggestions: $.map( results, function( item ) { 
          		return {value: item.Title, data: item.Value + '<br>' + "123"}	})
        }
    },
    onSelect: function (suggestion) {
        $("#selected1").text('Selection: ' + suggestion.value + ', ' + suggestion.data);
    }
});