jQueryUI 1.8.14 Autocomplete

by Camille Bechayda

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<input type="text" id="customer-search" />

JavaScript

$("#customer-search").autocomplete({
    source: [{
        label: "Tom Smith",
        value: "1234"},
    {
        label: "Tommy Smith",
        value: "12321"}],
    minLength: 3,
    select: function(event, ui) {
       // event.preventDefault();
        alert('select called')
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
        return false;
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
})
.data("autocomplete")._renderItem = function( ul, item ) {
    var li= $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a style='text-align:left' href='google.com'>    <span>"+item.label+"</span><input class='prod-list-addbtn' value='ADD' type='button' style='position: relative;top: 6px;'></a>")
.appendTo(ul);
    return li;
}

 $(document).delegate('ul .prod-list-addbtn', 'click', function (e) {
                  e.stopPropagation();
                  e.preventDefault();
     alert('dont call select of autocomplete, but still called');
                  return false;
              });