html datalist css style

Solutions on MaxInterview for html datalist css style by the best coders in the world

showing results for - "html datalist css style"
Isabelle
29 Apr 2019
1$(document).on('dblclick', 'input[list]', function(event){
2    event.preventDefault();
3        var str = $(this).val();
4    $('div[list='+$(this).attr('list')+'] span').each(function(k, obj){
5            if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
6                $(this).hide();
7            }
8        })
9    $('div[list='+$(this).attr('list')+']').toggle(100);
10    $(this).focus();
11})
12
13$(document).on('blur', 'input[list]', function(event){
14        event.preventDefault();
15        var list = $(this).attr('list');
16        setTimeout(function(){
17            $('div[list='+list+']').hide(100);
18        }, 100);
19    })
20
21    $(document).on('click', 'div[list] span', function(event){
22        event.preventDefault();
23        var list = $(this).parent().attr('list');
24        var item = $(this).html();
25        $('input[list='+list+']').val(item);
26        $('div[list='+list+']').hide(100);
27    })
28
29$(document).on('keyup', 'input[list]', function(event){
30        event.preventDefault();
31        var list = $(this).attr('list');
32    var divList =  $('div[list='+$(this).attr('list')+']');
33    if(event.which == 27){ // esc
34        $(divList).hide(200);
35        $(this).focus();
36    }
37    else if(event.which == 13){ // enter
38        if($('div[list='+list+'] span:visible').length == 1){
39            var str = $('div[list='+list+'] span:visible').html();
40            $('input[list='+list+']').val(str);
41            $('div[list='+list+']').hide(100);
42        }
43    }
44    else if(event.which == 9){ // tab
45        $('div[list]').hide();
46    }
47    else {
48        $('div[list='+list+']').show(100);
49        var str  = $(this).val();
50        $('div[list='+$(this).attr('list')+'] span').each(function(){
51          if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
52            $(this).hide(200);
53          }
54          else {
55            $(this).show(200);
56          }
57        })
58      }
59    })