Customizing dropdown menu for jquery category autocomplete
rick
I am trying to customize the dropdown menu for category autocomplete widget because I have few issues with normal widget's dropdown, but I am not able to get my head around on how to do that. I am able to find resources to do for normal autocomplete widget, but not for categorized one. Below is my code.
<head>
<style type="text/css">
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
z-index: 2000;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
</script>
<script>
$(function() {
var data = [
{ label: "TV", category: "Electornics" },
{ label: "WM", category: "Electornics" },
{ label: "M3", category: "Electornics" },
{ label: "Table", category: "Funiture" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
Other parts of web page have z-index greater than this, so the dropdown menu is hidden by few elements.
Dropdown style of default looks very basic and width of the dropdown exceeds the search input width if the item text is lengthy, so want to customize like below.
Can someone please shed some light on customization of categorized widget?
C.P.
What I understood from your question is you want to change look-n-feel of category auto-complete dropdown. If that is so, here is fiddle I created for you to show how we can override the CSS to get desired look.
You can play arround with CSS to fix the width of textbox and autocomplete dropdown like this:
#search{
width: 170px;
}
.ui-autocomplete {
z-index: 2000;
width: 170px !important;
}
I have modified some JS code to attach icons to options in dropdown.
If some other page elements are overlapping on your dropdown then you can try increasing z-index on class .ui-autocomplete
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Using Jquery $this for Dropdown Menu
- 2
dropdown menu with jquery second level
- 3
jquery autocomplete accept without selecting from dropdown
- 4
Finding text in Dropdown menu with Jquery and setting it to Selected
- 5
How to display the selected value from the dropdown menu using JQuery?
- 6
How to add dropdown menu?
- 7
Dropdown menu effect
- 8
Bootstrap 3.1.1 links inside ".dropdown-menu li > a" and jquery event "onClick" on it's "a" nodes
- 9
JQuery Autocomplete - Force choice
- 10
jQuery autocomplete select event
- 11
mouseover and mouseout functions in dropdown menu
- 12
PHP within javascript for dropdown menu
- 13
VIM snippet phrase dropdown menu
- 14
CSS Menu sideways or Horizontal Dropdown
- 15
Bootstrap dropdown menu links not clickable
- 16
Add Banner Below Menu in Category Page
- 17
Autocomplete returns results but does not render menu
- 18
textarea top alignment with jQuery autocomplete
- 19
JSON Array for jQuery UI Autocomplete
- 20
Repeative values occur in Autocomplete jquery
- 21
Dropdown menu item moves other elements to the right
- 22
Create a dropdown menu with range or years automatically
- 23
Using JqueryUI dropdown menu to show individual divs
- 24
Dropdown menu cropped as it stretches to the length of its container
- 25
CSS menu dropdown alignment not working in Chrome
- 26
Dropdown navigation menu <li> centering issue
- 27
Magento : How Display Category name in magento menu in two lines?
- 28
Linux Mint - add file type to "new file" context menu category
- 29
jQuery Context Menu, single menu with multiple actions
몇 마디 만하겠습니다