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的地方，我需要这里的tag-it输入框的值......

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。来自文档：

一个请求对象，具有单个术语属性，引用当前在文本输入中的值。例如，如果用户输入＆＃34; new yo＆＃34;在城市字段中，自动填充术语将等于＆＃34; new yo＆＃34;。

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

要点击按钮获取输入的代码，请参阅 DEMO

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函数。有关更多选项，请参阅插件文档。

access tag-it输入字段

3 个答案: