如何进行选择自动完成?

时间:2016-03-13 09:05:16

标签: jquery html jquery-ui select autocomplete

我有这个功能填充选择列表

 function filldropdownlistDemandUnitsEmployee(res) {
            var select = document.getElementById("#drpRequestDemandUnit");
            $("#drpRequestDemandUnit").empty();
            $('#drpRequestDemandUnit').append($("<option></option>").attr("value", -1).text('الكل'));
            if (res != null) {
                var test = $.parseJSON(res.d);

                $(test).each(function () {
                    var option = $('<option />');
                    option.attr('value', this.UserId).text(this.NameAr);
                    $("#drpRequestDemandUnit").append(option);
                });
            }
            var valuee = $("#drpRequestDemandUnit").val();

            $("#<%= hiddenFieldDemandEmployeeID.ClientID %>").val(valuee);
        }

我需要让它支持自动完成 我试试这个

 $("#drpRequestDemandUnit").autocomplete({

             select: function (event, ui) {
                 $("#drpRequestDemandUnit").val(ui.item.text);
                               return false;
             }
         }); 

但我没有得到任何东西,因为我不知道如何获得来源

请帮助

1 个答案:

答案 0 :(得分:0)

我认为你做错了,如果你想让选择框转换为自动完成,请按照example here进行操作,否则通常会在文本框中执行自动完成,这里是你如何做的,点击运行并输入在文本框中验证

 function loadList(res) {
   var options = ['الكل'];
   if (res != null) {
     var test = $.parseJSON(res.d);

     $(test).each(function(i, d) {
       options.push(d);
     });
   }
   return options;
 }

 var myList = loadList({
   d: '[ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]'
 });

 $("#auto").autocomplete({
   source: function(request, response) {
     console.log(myList);
     response(myList.filter(function(l) {
       return l.toLowerCase().indexOf(request.term.toLowerCase()) === 0;
     }));
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input type="text" id="auto" value="" />