MitsuiCopy

by DanielD

HTML

<div class="wrapper">
    <input type="text" id="extNum" class="extInput"/>
    <div class="services">
        <a href=""><span class="servicesHead" id="servicesHeader"></span></a>
    </div>
</div>

CSS

.wrapper{position:relative; clear:left;}
.extInput, .services{float:left;}

.extInput{}

.services{
  display:none;            
}
.servicesHead{
}

JavaScript

var getSource, handleSelect, handleClose, data;

$(function(){
    
    $("#extNum").autocomplete({
        source : getSource
    });
});

handleSelect = function(event, ui){
};

handleClose = function(event, ui){
};
    
data = [{   'label'     :'Matsuo',
            'lastName'  :'Shinichi',
            'employeeId':'102332',
            'value'     :'20011',
            'services'  : ['park']
        },{
            'label'     :'Nakajima',
            'lastName'  :'Kumiko',
            'employeeId':'132876',
            'value'     :'20012',
            'services'  : ['park', 'pickup']
        },{
            'label'     :'Kago',
            'lastName'  :'Yumi',
            'employeeId':'102334',
            'value'     :'20013',
            'services'  : ['park', 'pickup', 'a']
        },{
            'label'     :'John',
            'lastName'  :'Doe',
            'employeeId':'103445',
            'value'     :'20014',
            'services'  : ['pickup','park','ugn','u']
        }];

getSource = function(request, response){
  var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    
  response($.grep(data, function(value) {
            for (var key in value) {
              if (value.hasOwnProperty(key) && matcher.test(value[key]) ) {
                 return true;
              }
            }
            return false;
        }));
};