CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alon Shmiel
Alon Shmiel

Reputation: 7121

Make a ul as input

I want to make a ul as input, like in this jsfiddle: http://jsfiddle.net/hailwood/u8zj5/

(but I dont want to use tagit, I want to implement it by myself)

I want the user can write something in the input and when he presses the enter key, a li with X button will be inserted to the input.

I really don't know how to implement it.

If I know how to make the ul as input, I will know how to do it.

please help me:

assuming I have the ul:

<ul id="countries"></ul>

I want to make it writable like in the jsfiddle I gave above.

and then it should be something like:

$('#countries').keypress(function(e) {
    if(e.which == 13) {
        var value; // here I have to get the value of the input
        // insert the li to the ul:
        $('#countries').append('<li value="1">' + value +
                       '&nbsp;&nbsp;<span class="closeButton">X</span></li>');
    }
});

$('.closeButton').live('click', function(){
    $(this).parent().remove();
});

any help appreciated!

Upvotes: 0

Views: 132

Answers (2)

Wilmer
Wilmer

Reputation: 2511

Is this what you mean?

$('#countries').keypress(function(e) {
    if(e.which == 13) {
        var value; // here I have to get the value of the input
        // insert the li to the ul:


       var html = $(value).find("ul").append('<li value="1">' + value +
                       '&nbsp;&nbsp;<span class="closeButton">X</span></li>');
        $("#countries").val(html);
    }
});

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

Use contenteditable.

<ul id="countries" contenteditable="true"></ul>

http://www.w3schools.com/tags/att_global_contenteditable.asp

Upvotes: 1

Related Questions