Professional Jquery Based Combobox Control

Professional jQuery based Combobox control?

Unfortunately, the best thing I have seen is the jquery.combobox, but it doesn't really look like something I'd really want to use in my web applications. I think there are some usability issues with this control, but as a user I don't think I'd know to start typing for the dropdownlist to turn into a textbox.

I much prefer the Combo Dropdown Box, but it still has some features that I'd want and it's still in alpha. The only think I don't like about this other than its being alpha... is that once I type in the combobox, the original dropdownlist items disappear. However, maybe there is a setting for this... or maybe it could be added fairly easily.

Those are the only two options that I know of. Good luck in your search. I'd love to hear if you find one or if the second option works out for you.

Jquery custom select/combobox

You can use the jQuery Editable Combobox plugin for that.

jQuery Editable Combobox is a jQuery
function that allows you to transform
any tag into editable
combobox.

This is done by adding a new
element to carry the value entered by
the keyboard. This will only work on
select elements. Any other elements
this function will be applied to will
be ignored.

jQuery combobox suggestion

jQueryUI has an autocomplete plugin that can be used as a combobox.

dropdownlist to combobox

I'm using the jqueryui combobox for this in several projects.

I simply copied the script from that example and made some project specific changes to it.

For the 100% width you can try something like this: http://jsfiddle.net/KnBpt/

Works a lot better than the Ajax control toolkit version, it can even find a value when you type a part of the name, the asp:Combobox only finds it if it starts with your value.

To make AutoPostback work when typing a value, you'll have to trigger the .change() on the original select element:

$('.ui-autocomplete-input').bind('autocompleteselect', function(){ 
    $(this).prev('select').change();
});

This triggers a .change() for every jqueryui autocomplete and combobox when their value changes, and that will automatically trigger the AutoPostback (if set to true), without knowing the ClientID or anything.

Get selected value from COMBO BOX using jQuery

http://jsfiddle.net/littlefyr/H6yeJ/

JQuery allows you to select based on the content of the element. So you simply use selectors to do what you want:

$('.x-combo-list-item:contains("Partner")').click(function() {
    var $this = $(this);
    alert('You have selected Partner!');
    commonFunction($this);
});

$('.x-combo-list-item:not(:contains("Partner"))').click(function() {
    var $this = $(this);
    alert('You have not selected Partner!');
    commonFunction($this);
});

function commonFunction(item){
    // do Ajaxy stuff
};

This fails when you start changing the text (like when you have to translate the text). In this case you simply add a constant value to the tags and use attribute selectors:

$('.x-combo-list-item[data-val=pnr]').click(function() {
    var $this = $(this);
    alert('You have selected Partner attribute wise!');
    commonFunction($this);
});

$('.x-combo-list-item[data-val!=pnr]').click(function() {
    var $this = $(this);
    alert('You have not selected Partner attribute wise!');
    commonFunction($this);
});
$('.x-combo-list-item:not([data-val=pnr])').click(function() {
    var $this = $(this);
    alert('You have not selected Partner alternative attribute wise!');
    commonFunction($this);
});

You also can combine those with .x-combo-selected and :not(.x-combo-selected) in order to handle selected items differently.

If you're adding items via code (or even as a matter of principle) you should delegate the events to a relevant ancestor:

$('.x-combo-list-inner')
.on('click', '.x-combo-list-item:contains("Partner")',function() {
    var $this = $(this);
    alert('You have selected Partner! Again');
    commonFunction($this);
}).on('click', '.x-combo-list-item:not(:contains("Partner"))', function() {
    var $this = $(this);
    alert('You have not selected Partner! again');
    commonFunction($this);
})

Select value on combobox with jquery

If you want to select the <option> element associated with your value, you can use val():

<select id="mySelect">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="quux">Quux</option>
</select>

---

$("#mySelect").val("quux");

JSP/Jquery - combo box dropdown dynamically loaded from database with image

Since you are using jsp as view technology, use core tags to decide whether you want to show green tick or red cross depending upon the access level.

Visit this site to know more about the usage of core tags. Don't forget to include jstl.jar and standard.jar files in your project classpath. They are necessary libraries which support jstl.

Looks like your application is developed using spring framework, so I'll try to explain it that way only.

Your JSP code will be something like this: name it userlist.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!doctype>
<html>
    <head>
       <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js" type="text/javascript></script>
       <script src="${pageContext.request.contextPath}/js/jquery.dd.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/dd.css" />
    </head>
    <body>
        <form:select id="userNames" path="userName" tabindex="10">
            <form:option value="Select User">Select User</form:option>                
            <c:forEach begin="${userlist begin index (0)}" end="${userlist size}" var="i">
                <c:choose>
                    <c:when test="${userNameList.user.accessLevel == 1}">
                        <form:option style="background-image:url(greentick.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:when>
                    <c:otherwise>
                        <form:option style="background-image:url(redcross.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </form:select>
    </body>
</html>

---

Now you will have a controller which will be called after invoking some action and it will return this jsp along with userNameList.
Below is sample UserController.java

@Controller
public class UserController {

    @RequestMapping(value = "/showUsers", method = RequestMethod.GET)
    public String showUserInfo(Model model) {
        // here you prepare the userList, the list of Users along with information
        // here User can be fetched from DB & values stored in User DTO and then DTO in the list
        List<User> userNameList = new ArrayList<User>();
        userNameList.add(User DTO objects go here);
        model.addAttribute("userNameList", userNameList);
        return "userlist";       // remember this is our jsp name
    }
}

& User DTO can be something like this.
Below is sample User.java

public class User {
    private String userName;
    private int accessLevel;

    // setters & getters of variables
}

This can't be fully articulated answer. I have tried my best to explain.
You give this a try. It should work.

---

Related Topics