訪問標簽輸入字段

Question

我在這里使用tagit： http ：//aehlke.github.io/tag-it/，它會生成一個用於標記項目的輸入框。 我需要訪問輸入框，但沒有ID。 基本上是這樣的：

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

我已經嘗試了所有類似的方法：

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

仍然無法訪問...

我正在嘗試在用戶鍵入值時使用該值，並將其傳遞給Web服務以執行自動完成：

$.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
                                }
                            }));
                        }
                    });

看看我有NEED_VALUE_HERE，這里需要標記輸入框的值...

Answer 1

這段代碼來自我的一個項目：

$("#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
                    }
                }));
            }
        });
    }
});

這是我的自動完成標記。

要獲取用戶寫的內容，請使用request.term 。 從文檔：

具有單個term屬性的請求對象，它引用文本輸入中當前的值。 例如，如果用戶在城市字段中輸入“ new yo”，則“自動完成”字詞將等於“ new yo”。

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

Answer 2

那這個呢

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

或者，由於我不知道該元素附帶的className，請一一嘗試：)

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

EDIT分析了提到的組件后...

<!-- 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>

我可以使用以下行從控制台訪問該值

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

當已經添加標簽時，您可以像這樣訪問

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

Answer 3

要通過單擊按鈕獲取輸入的標簽，請參考此演示

JS代碼：

$(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">

然后，您可以將變量tags的值傳遞給ajax函數。 請參閱插件文檔以獲取更多選項。