jQuery Plugin For Stylable User Modifiable Combobox - MomboBox

jQuery Plugin For Stylable User Modifiable Combobox - MomboBox
File Size: 121KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MomboBox is a jQuery plugin that attaches a select drop down list with preset items to your input box when focused on. Your users can select a item from the drop down list or type something into the input that isn't found in the list.

You might also like:

How to use it:

1. Include jQuery library and MomboBox.js on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="MomboBox.js"></script>

2. The HTML

<label for="demo">Choose a website:</label>
<input id="demo" />

3. The CSS

div.mombomenu {
    width: 70px;
    border: solid 1px #000;
    height: 90px;
    overflow: auto;
    position:absolute;
    background-color: #fff;
}
div.mombomenu .item {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 1px;
}
div.mombomenu .item.selected {
    color: #fff;
    background-color: #007;
}
div.mombomenu .item.match {
    font-weight: bold;
}
div.mombobutton {
    border: solid 1px #ccc;
    background-color: #eee;
    width: 16px;
    height: 17px;
    float:left;
    text-align: center;
    border-left: none
}

4. Call the plugin

<script>
$(function () {
$('#demo').momboBox({
data:[
'www.jQuery.com',
'www.google.com',
'www.jQueryScript.Net',
'www.yahoo.com',
'www.facebook.com',
'www.twitter.com',
'www.tumblr.com',
'www.pinterest.com'
]
})
});
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.