jInputDropList

by Radiocity

HTML

<label>Type a color name:</label>
<input type="text" name="inp"/>
<p>
    Params:<br/>
    <i>mylist</i> - array of titles<br/>
    <i>myclass</i> - custom inner class name<br/>
    <i>myclassouter</i> - custom outer class name<br/>
    <i>forceposition</i> - boolean for cutsom style
</p>

<input type="text" name="inp2"/>

CSS

body{
 padding:1em;   
 font-size:16px;
     font-family: 'Arial';
}

label{
 font-size: 0.7em;
 display:block;
 line-height: 1.4em;

}

input{
 font-size:1em;  
 border:2px solid #9c6;   
 line-height: 2em;
 border-radius: 4px; 
 padding: 0 4px;  
 min-width:196px; width:196px;
}

input:focus{
 outline:none;
}

.jinputdroplist{
    background: #9c6;
    min-width:204px; width:204px;
    border: 2px solid #9c6;
    position: relative;
    top:-2px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display:none; /*on ready*/
}

.jinputdroplist ul{
     list-style-type: none !important;   
     overflow:hidden;    
}

.jinputdroplist li{
    font-size:12px;
    cursor:pointer;
    line-height:24px;
    white-space:nowrap;
    padding: 0 5px;
}

p{
 font-size:10px;
 padding: 16px 0px;    
}

.jinputdroplist li:hover{
    background:#8ABD57;
}

.jinputdroplistouter{
    width:1px;
    height:1px;
    position: relative;    
}

JavaScript

(function($){var defaults={mylist:'',myclass:'jinputdroplist',myclassouter:'jinputdroplistouter',forceposition:true};var options;function htmlspecialchars(text){var chars=Array("&","<",">",'"',"'");var replacements=Array("&amp;","&lt;","&gt;","&quot;","'");for(var i=0;i<chars.length;i++){var re=new RegExp(chars[i],"gi");if(re.test(text)){text=text.replace(re,replacements[i])}}return text}$.fn.jinputdroplist=function(params){options=$.extend({},defaults,options,params);return this.each(function(){var myid=$(this).attr('id');if(myid==undefined){myid='jid_'+parseInt((Math.random()*16535+1));$(this).attr('id',myid)}var h='<div class="'+options.myclassouter+'"><div rel="'+myid+'" class="'+options.myclass+'"><ul></ul></div></div>';jQuery.expr[':'].Contains=function(a,b,c){return(a.textContent||a.innerText||"").toUpperCase().indexOf(c[3].toUpperCase())>=0};$(this).after(h);var mypattern='div.'+options.myclass+'[rel="'+myid+'"]';$.each(options.mylist,function(index,value){h='<li>'+htmlspecialchars(value)+'</li>';$(mypattern+' ul').append(h)});$(mypattern+' ul li').click(function(){$('#'+myid).attr('value',$(this).text());$(mypattern+' li').hide();$(mypattern).hide()});$(this).change(function(){var f=$(this).val();if(f){var matches=$('div.'+options.myclass+'[rel="'+myid+'"] ul').find('li:Contains('+f+')');if(matches.length>0){$(mypattern).show()}else $(mypattern).hide();$(mypattern+' li').not(matches).hide();matches.show()}else{$(mypattern).hide()}return false});$(this).keyup(function(){$(this).change()})})}})(jQuery);


$(document).ready(function(){
    $('input').jinputdroplist({'mylist':['Red', 'Green', 'Blue']});
    
});