Turn a word inside an HTML inputbox into a clickable button

Question

At pinterest.com, a user can type in anything into the search box. As soon as the mouse leaves the search box, all the words are converted into a button with a close button.

The same thing happens in the 'Tags' input box here at stackoverflow.

How was this implemented? Is there a jquery plugin for it?

@Sunil, http://stackoverflow.com/questions/8587295/making-a-tag-suggestion-using-jquery-chosen-plugin Same question has been answered here — React Developer, Sep 10 '14 at 06:58
@RoryMcCrossan Thanks! That was exactly what I was looking for. — Sunil Khiatani, Sep 10 '14 at 07:05

kwnccc · Answer 1 · 2014-09-10T11:12:25.717

As soon as you find a keyword that you want to have a tag behaviour: - change the class of the input field (that way changing the styling - make the input field look like a button) - make the input field disabled - show the close button

HTML Code:

<div class="tag-container">
   <input type="text" class="tag"/>
   <span class="btn-close">&#215;</span>
</div>

CSS Code:

.tag-container{
    position:relative;
    display:inline-block;
}

.tag:focus{
   border-color: blue;
   color: blue;
}

.tag-found .tag{
    background:blue;
    border-color:blue;
    color: white;
}
.btn-close{
    display:none;
}
.tag-found .btn-close{
    display:inline-block;
    color:white;
    background: blue;
    font-size:16px;
    text-align:center;
    position:absolute;
    right:6px;
    top:3px;
    cursor:pointer;
}

Javascript Code:

$(".tag").keyup(function (e) {
    var key = e.which;
    if(key == 13)  // the enter key code
    {
        $(".tag-container").addClass("tag-found");
        $(this).attr("disabled", "disabled");
    }
});

$(".btn-close").click(function(){
    $(".tag-container").removeClass("tag-found");
    $(".tag").removeAttr("disabled");
});

Have a detailed look at this example: http://jsfiddle.net/kwnccc/83qLje4o/

Turn a word inside an HTML inputbox into a clickable button

1 Answers1