autocomplete custom

by oterox

HTML

<div class="ui-widget">
    <input id="names" />
</div>

<div id="results" style="border-width: 2px; border-style: solid; border-color: red; ">results:</div>

CSS

.ui-menu .ui-menu-item {
    width: 47%;
    height: 80px;
    margin: 5px;
    background-color: #DDD;
    float: left;
    cursor: pointer;
}

JavaScript

var selected;  

var $input = $("#names").autocomplete({
    source: [
         "Alaín",
         "Alfonso",
         "Alfredo",
         "Javier",
         "Cesar",
         "antonio"
    ],
    select: function( event, ui ) {
        selected = true;
    },
    open: function() {
        $(this).autocomplete("widget")
               .appendTo("#results")
               .css("position", "static");
    }
});

//Override close method - see link below for details
(function(){
   var originalCloseMethod = $input.data("autocomplete").close;
    $input.data("autocomplete").close = function(event) {
        
        selected = false;
    };
})();