Multiple selection control jQuery UI

Question

I have an input running in an HTML page. I'm using jQuery UI.I want the user to type some text in the input, and then once he will press Enter, the input will become empty and the text he had entered will appear bellow, with an X next to it. This will allow the user to enter many options, and then remove any of them by clicking on the respective X button. I'm attaching an illustration of what I want to achieve:

Is there a jQuery UI control that can help me achieve this? If not, how else would you do it?

Thanks!

there is no need of jquery plugin for this , you can jsut do it with jquery , it should be pretty simple — kobe
– kobe, Commented Dec 15, 2010 at 7:20

dyve · Accepted Answer · 2010-12-15 07:55:48Z

1

HTML:

<form id="input_text">
    <input id="add_text" type="text">
</form>
<div id="results"></div>

JavaScript (on document ready):

var addText = $("#add_text");
var results = $("#results");

$(".remover").live("click", function() {
    $(this).parent("div").remove();
    return false;
});

$("#input_text").submit(function() {
    var newText = $.trim(addText.val());
    if (newText) {
        results.append('<div><a href="#" class="remover">x</a> ' + newText + '</div>');
    }
    addText.val("").focus();
    return false;
});

Full solution: http://jsfiddle.net/QduEQ/

answered Dec 15, 2010 at 7:55

dyve

6,0632 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kobe Over a year ago

nice example , i thought of writing in jsfiddle but gave up and just gave him some psuedo code...+1 for your solution

kobe · Accepted Answer · 2010-12-15 07:25:18Z

0

I can give a idea how to do this if you are ok with jquery.

1) Create a form with a input box.

2) create a form click event // return flase is not to submit the form

$('#target').submit(function() {
   // get the inputs text by using .val() on input
   // set the value to the label defined // add label dynamically or a div tag or a span tag , anything should be fine
   // make one more x image along with label
  return false;

});

3) Give a class name to the image , and have one more click event for image

$('.Imageclass').live('click', function() {
      remove the label or hide it using jquery selector
});

I gave psuedo code kind of stuff , this should pretty much what you want

answered Dec 15, 2010 at 7:25

kobe

15.9k15 gold badges67 silver badges93 bronze badges

Comments

Sergey · Accepted Answer · 2010-12-15 07:40:55Z

0

You could do this by manipulating a select control in DOM. What you'd have to do is create a 'wrapper' for the select control. The control itself will be hidden on the page. The wrapper will be a div with the input field and a down arrow which would show a drop-down-like div with your current selected items. When a user enters new item, you add it to your hidden select control. When they delete it, you also delete it from the hidden select. That's basically the general idea.

answered Dec 15, 2010 at 7:40

Sergey

Collectives™ on Stack Overflow

Multiple selection control jQuery UI

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related