<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Test Web Services VTiger</title>
        <!-- include CSS basic stylesheet -->
        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css"/>
    </head>
<body>

        <!-- Include Vtiger Web Services library -->
        <!--<script type='text/javascript' src='/vtwsclib/third-party/js/jquery.js'></script>-->
        <script type='text/javascript' src='/vtwsclib/third-party/js/md5.js'></script>
        <script type='text/javascript' src='/vtwsclib/Vtiger/WSClient.js'></script>
        <!-- include jQuery and jQuery UI libraries (principal and plugins) -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        
<div class="ui-widget">
  <label>Enter your name: </label>
  <input type="text" id="name"/>
</div>
<script type="text/javascript">
        var url = 'your url';
        var client = new Vtiger_WSClient(url);  
        jQuery(document).ready(function($){
                jQuery("#name").autocomplete({
                        source: function(request, response){
                                var searchParam  = request.term;
                                if (!client.sessionName) {
                                        client.doLogin('USER', 'API_KEY');
                                }
                                var query = "SELECT * FROM Contacts WHERE lastname like'%"+searchParam+"%'";
                                client.doQuery(query, response);
                                }
                        ,
                   focus: function(event, ui) {
                                        // prevent autocomplete from updating the textbox
                                        event.preventDefault();
                                        // manually update the textbox
                                        $(this).val(ui.item.firstname + " " + ui.item.lastname);
                        },      
                        select: function(event, ui){
                                // prevent autocomplete from updating the textbox
                                event.preventDefault();
                                // manually update the textbox and hidden field
                                $(this).val( ui.item.firstname + " " + ui.item.lastname );
                                return false;
                        }
                        ,
                        minLength: 2});
        });             
</script>
</body>