使用jquery为自动完成文本框插入值而不是标签

时间:2018-02-20 05:51:30

标签: jquery autocomplete

我想在自动填充文本框上显示标签,但希望将值存储在jquery autcomplete之后。标签正确填充,但在它后面存储标签而不是值。我如何使用自动完成jquery文本框来存储值而不是标签。标签是名称,值是他们的电子邮件。下面是jquery代码。

注意: - 我使用字典在c#中使用这两个值

$(function () {

            var arr = [];

            var arrName = [];

            $('#<%=NotifyUsersEmail.ClientID %>').tagit({

                autocomplete: {
                    delay: 0,
                    minLength: 1,
                    source: function (request, response) {

                        $.ajax({
                            url: '<%=ResolveUrl("~/Case.aspx/GetTags") %>',
                            data: "{ 'prefix': '" + request.term + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                arr = $.map(data.d, function (el) { return el });

                                response($.map(data.d, function (item,index) {

                                    return {
                                        label: item,
                                        val: index
                                    }
                                }))
                            },

                            error: function (response) {

                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    },
                    select: function (event, ui) {
                        // prevent autocomplete from updating the textbox
                        alert(ui.item.val)
                        event.preventDefault();
                        $(this).val(ui.item.label);
// here if i use $(this).val(ui.item.val); then the textbox value is changed to emails but i want to keep the labels displayed

                    },
                },
                //availableTags: arr,



                //beforeTagAdded: function (event, ui) {


                //    // do something special
                //    if ($.inArray(ui.tagLabel, arr) == -1) {
                //        return false;
                //    }
                //}
            });





        });

1 个答案:

答案 0 :(得分:0)

您的代码应该可以查找,检查您的响应和响应的格式

&#13;
&#13;
$( function() {
    var availableTags = [
      {"label":"ActionScript","val":"someemail#some.lk"},
      {"label":"Script","val":"abc@abc.com"},
      {"label":"Raction","val":"jkl@wsd.com"},
      {"label":"BctionScript","val":"QQQQ@SSSS.com"},
      {"label":"DctionScript","val":"Test@testing.com"}
   
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
          select: function (event, ui) {
                        alert(ui.item.val)
                        event.preventDefault();
                        $(this).val(ui.item.label);


                    }
    });
  } );
&#13;
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
&#13;
&#13;
&#13;