Visualforce Page for AutoTypeAhead

1) Create a generic class with SOSL for "AutoTypeAhead" functionality.

2) Create a visualforce page with JQuery and Bootstrap and generic class for "AutoTypeAhead"

***************************************

Code Details:

***************************************

************************************************************************************************************
Class: AutoTypeAheadController
************************************************************************************************************
global class AutoTypeAheadController {

    @RemoteAction
    global static SObject[] autoSearch(map<string,string> request){
    /*
        Purpose: this function will be called from the lightning component,
        This will provide search result (SOSL) for any single object.
      
        request contains the following string key-value pairs
        @find: the actual string, user would search for
        @sobject: api name of sobject in which search would occur
        @fields: csv of the api names of the field that search would return
        @where: where clause used in SOSL
        @limit: limit clause used in SOSL
        @return: the function would return list of sobject
  
        Example:
        map<String, String> request
        = new Map<String, String>
        {'find' => 'test', 'sobject' => 'Account', 'fields' => 'Id, Name', 'where' => 'Status=Active', 'limit' => 25};    
    */

        String find = String.escapeSingleQuotes(request.get('find'));
        String sobject_name = request.get('sobject');
        String fields = request.containsKey('fields')? request.get('fields') : 'Name';
        String where_clause = request.containsKey('where') ? ' WHERE ' + request.get('where') : '';
        String limit_clause = request.containsKey('limit') ? ' LIMIT ' + request.get('limit') : '';
      
      
        String sosl = 'FIND \'%STR%*\'IN NAME FIELDS RETURNING %SOBJECT% (Id, %FIELDS% %WHERE% %LIMIT%)';
        sosl = sosl.replace('%WHERE%', where_clause);
        sosl = sosl.replace('%LIMIT%', limit_clause);
      
        sosl = sosl.replace('%STR%', find).replace('%SOBJECT%', sobject_name).replace('%FIELDS%', fields);
      
        SObject[] search_result = new SObject[0];
     
      
        for(sobject s :search.query(sosl)[0]){
            if(String.valueOf(s.get('Name')).containsIgnoreCase(find)) {
                search_result.add(s);            }
        }
        return search_result;
    }
}

************************************************************************************************************
Visualforce Page: AutoTypeAheadPage
************************************************************************************************************
<apex:page controller="AutoTypeAheadController">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="<<SFDC URL>>/soap/ajax/32.0/connection.js"></script>
<script src="<<SFDC URL>>/soap/ajax/32.0/apex.js"></script>
<script>
   var j$ = jQuery.noConflict();
   var autoTypeAheadApp = {
       opportunity_select: function(event, ui) {
        /*
         * method: opportunity_select
         * @arguments:
         * event - javascript event object
         * ui - Account record object
         * @returns records object for searched string
         * Description: This method sets Account field on select of Account record
         */
        j$("#Opportunity").val(ui.item.Id);
        var current_URL = window.location.href;
        //****Add Action to be done ****
       },
        opty_autocomplete_source: function(request, response){
            /*
             * method: autocomplete_source
             * @arguments:
             * request - request object for autocomplete widget
             * response - response from the Salesforce
             * @returns reponse object to autocomplete widget
             * Description: This method forms request and response object for account search in autocomplete widget
             */
            var ele = this.element;
            ele.data('records', []);
            var search_string = request.term;
            var obj = 'Opportunity';
            var whrCond = " OwnerId='"+'{!$User.Id}'+"'";
            var limitstr = '25';
          
            AutoTypeAheadController.autoSearch({
                find: search_string, sobject: obj
            }, function(result, event){
                ele.removeClass('ui-autocomplete-loading');
            if(result!=null){   
                ele.removeClass('ui-autocomplete-loading');
                response(j$.map(result, function(itm){
                    itm.label = itm.Name;
                    itm.value = itm.label;
                    itm.id = itm.Id;
                    return itm;
                }));
                };
            });
        },
        opportunity_typeahead: function(ele){
            /*
             * method: opportunity_typeahead
             * @arguments:
             * ele - DOM object for search box
             * Description: This method initiates autocomplete jquery UI widget on keypress in search input box and renders results as table.
             */
            j$(ele).addClass('ui-autocomplete-loading');
            if(ele.value == ""){
                j$(ele).removeClass('ui-autocomplete-loading');
            }
          
            j$(ele).autocomplete({
                source: autoTypeAheadApp.opty_autocomplete_source,
                minLength: 3,
                delay: 800,
                autoFocus: false,
                select: autoTypeAheadApp.opportunity_select,
                position: {my : "left top", at: "left bottom"}
            });
        },
        add_event_listeners: function(){
        /*
         * method: add_event_listeners
         * @arguments: N/A
         * Description: This method attaches event listeners to various actions in the application
         */

                j$('header').on('keypress keyup', '.search-opportunity-input', function (event) {
                    var key_code = event.keyCode ? event.keyCode : event.which;
                    if(key_code == 13) {
                        event.preventDefault();
                        return false;
                    }
                    autoTypeAheadApp.opportunity_typeahead(this);
                });
        }
    };
    j$(document).ready(function(){
        var self =  this;
        autoTypeAheadApp.add_event_listeners();
    });
</script>
<body>
<!--<div class="loader">Loading...</div>-->
<header>
<div id="navbar" class="form-group">
      <form class="navbar-form navbar-left search-opportunity-form" role="search">
          <div class="form-group">
              <input type="text" class="form-control input-sm search-opportunity-input" id="Opportunity" placeholder="Select Opportunity"/>          
          </div>
      </form>
 </div>
 </header>
 </body>
</apex:page>