CODEWITHSUNDEEP
javascriptjqueryjquery-ui
JonH
JonH

Reputation: 33143

access tag-it input field

Im using tagit from here: http://aehlke.github.io/tag-it/ and it generates an input box to tag items. I need to get access to the input box but it doesn't have an ID. It basically is this:

<input type="text" class="ui-widget-content ui-autocomplete-input dirty ui-corner-all" autocomplete="off">

And I've tried everything like so:

alert($('.ui-widget-content ui-autocomplete-input dirty ui-corner-all input[type=text]').val());

And still cannot access it...

I'm trying to take the value as the user types it and pass to a web service to perform an autocomplete:

$.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/Code/WebServices/Tags.asmx/GetTags",
                        dataType: "json",
                        data: '{"entityId":"' + entityId + '","search":"' + NEED_VALUE_HERE + '"}',
                        success: function(data) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: item.TagName,
                                    value: item.TagName
                                }
                            }));
                        }
                    });

See where I have NEED_VALUE_HERE, I need the value of the tag-it input box here...

Upvotes: 0

Views: 1011

Answers (3)

Rahul Gupta
Rahul Gupta

Reputation: 10141

To get the inputted tags on click of a button refer this DEMO

JS code:

$(function(){
    $('#myTags').tagit();
    $('#submit').click(function(){
        var tags = $("#myTags").tagit("assignedTags");
        alert("tags = "+tags);
    });
});

HTML:

<ul id="myTags"></ul>
<input type="button" value="Submit" id="submit">

Then you can pass the value of variable tags to your ajax function. Refer plugin documentation for more options.

Upvotes: 0

hex494D49
hex494D49

Reputation: 9235

What about this

alert(document.getElementsByClassName("ui-widget-content")[0].value);

Or, since I don't know the className attached to that element, try them one by one :) 

alert(document.getElementsByClassName("possible-target-element")[0].value);

EDIT After analyzing the mentioned component...

<!-- I believe this is the part we need -->
<ul class="tagit ui-widget ui-widget-content ui-corner-all">
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable"><span class="tagit-label">fancy</span><a class="tagit-close"><span class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a></li>
    <!-- lots of li elements here-- >
    <!-- the last one -->
    <li class="tagit-new">
        <!-- here's the input element we need -->
        <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
    </li>
</ul>

I was able to access the value from the console with following line

var target = document.getElementsByClassName('tagit')[0].getElementsByTagName('INPUT')[0].value;

While already added tags you may access like this

var target = document.getElementsByClassName('tagit')[0].getElementsByTagName('SPAN')[0].innerHTML;

Upvotes: 0

hlscalon
hlscalon

Reputation: 7552

This piece of code was taken from a project of mine:

$("#UL-OF-TAGIT").tagit({
    singleField: true,
    allowSpaces: true,
    removeConfirmation: true,
    singleFieldNode: $("#FIELD-TAG-IT"),
    tagSource: function( request, response ) {
        $.ajax({
            url: "YOUR-URL",
            data: { term:request.term },
            dataType: "json",
            success: function( data ) {
                response( $.map( data, function( item ) {
                    return {
                        label: item.label,
                        value: item.value
                    }
                }));
            }
        });
    }
});

This is my tagit with autocomplete.

To get what the user is writting use the request.term. From the docs:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

http://api.jqueryui.com/autocomplete/

Upvotes: 1

Related Questions