Widgets > wijcombobox > wijcombobox Tutorial > wijcombobox Step 2 of 3: Initializing the Widget |
In the previous step, you added markup to add the content that will appear in the combobox. Now you can add the jQuery script to initialize the widget.
After the closing </div>
tags you added in the previous step, enter the following jQuery script to initialize the wijcombobox widget:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// put all your jQuery goodness in here.
$("#tagsinput").wijcombobox(
{
showingAnimation: { effect: "blind" },
hidingAnimation: { effect: "blind" },
data: [
{
label: 'c++',
value: 'c++'
},
{
label: 'java',
value: 'java'
},
{
label: 'php',
value: 'php'
},
{
label: 'coldfusion',
value: 'coldfusion'
}, {
label: 'javascript',
value: 'javascript'
},
{
label: 'asp',
value: 'asp'
},
{
label: 'ruby',
value: 'ruby'
},
{
label: 'python',
value: 'python'
},
{
label: 'c',
value: 'c'
},
{
label: 'scala',
value: 'scala'
},
{
label: 'groovy',
value: 'groovy'
},
{
label: 'haskell',
value: 'haskell'
},
{
label: 'perl',
value: 'perl'
}
]
}
);
$("#tags").wijcombobox(
{
showingAnimation: { effect: "blind" },
hidingAnimation: { effect: "blind" }
}
);
$('#show').click(function () {
$("#tags").show();
})
});
</script>