javascript - 保存/提交时使用多个选项的 Jquery 自动完成问题

Question

我正在尝试使用多选选项 true 来保存 jquery 自动完成功能。它适用于单个选项，但是当我启用多选时，它不会将数据发送到后数组 php。多选是否适用于文本字段？什么可能导致这个问题。我的代码如下:

  jQuery( ".medication .acf-input-wrap input" ).autocomplete({
            matchContains: true,
            multiselect: true,
             minLength: 2,
             messages: {
              noResults: function(count) {


              },},
              source: function(req, responseFn) {

                  //addMessage("search on: '" + req.term + "'<br/>");
                  var re = jQuery.ui.autocomplete.escapeRegex(req.term);
                  var matcher = new RegExp(  "\\b" + re, "i" );
                  var a = jQuery.grep( locations_array, function(item,index){
                      //addMessage("&nbsp;&nbsp;sniffing: '" + item + "'<br/>");
                      return matcher.test(item);
                  });
                  if(!a.length) {
                    jQuery("#result").remove();
                  jQuery(".medication .acf-input-wrap input").after(' <div id="result"></div>');
                //jQuery("#result").show();
                  jQuery("#result").html("<p class='no-result'>No Diagnosis Matched the keywords   <a href='<?php echo $current_uri;?>?keyword="+jQuery('.cannbi input').val()+"'> Add This Keyword</a><p>");

              } else {
                   jQuery("#result").remove();
              }

       // response(results);
                  responseFn( a );
              },
              focus: function (event, ui) {
                //jQuery(event.target).val(ui.item.label);
                jQuery("#result").remove();
                return false;
            },
          });

Answer 1

这里，我们有两个函数。我已经通过使用 Jquery 自动完成来使用这种方式进行多次自动完成。请尝试这个方法。您也可以删除不需要的行。

Jquery

getdata:function(){
            var _this = this;
              $.ajax({
                url:"home/username/folder/yourfile.php",
                type:"GET",
                success:function(data){
                 _this.listData(data);
                }
              });
        },
listData:function(castdata)
        {
            var castncrewarray = [];
            var castncrew = {};
            for(i in castdata)
            {
                castncrew['value'] = castdata[i].castncrewid;
                castncrew['label'] = castdata[i].name;

                castncrewarray[i] = castncrew;
                castncrew = {};
            }

            function split( val ) {
              return val.split( /,\s*/ );
            }
            function extractLast( term ) {
              return split( term ).pop();
            }

            $( "#scenecast" ).autocomplete({
              minLength: 1,
              source: castncrewarray,             
              focus: function( event, ui ) {
                $( "#scenecast" ).val( "" );
                return false;
              },
              select: function( event, ui ) {
                var count = $('#castcount').val();
                count = parseInt(count) + parseInt(1);

                if(count <= 5){

                    var list = [];
                    $('.selectcastscene').each(function () {
                        var castin = $(this).attr('id');
                        list.push(castin);
                    });

                    var castnew = 'remove-'+ui.item.value;

                    if(jQuery.inArray(castnew, list) !== -1){
                        showError('Cast already selected');
                        return false;
                    }else{
                        var inp = '<input type="hidden" name="scenecast" class="scenecast" value="'+ ui.item.value +'" >';
                        var html = '<div class="selectcastscene" id="remove-'+ui.item.value+'"  >'+inp+'<span class="tags">'+ui.item.label+'</span><span class="remove" id="remove-'+ui.item.value+'" >X</span></div>';
                        $('#castcount').val(count);
                    }

                }else{
                    showError("Reached max limit of 5 for casts.")
                }
                $( "#bigBox" ).append(html);
                return false;
              }
            })
            .autocomplete( "instance" )._renderItem = function( ul, item ) {
              return $( "<li>" )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
            };

            $(document).on('click','.remove', function() {
                  var id = $(this).attr('id');
                  $('#'+id).remove();
                  var count = $('#castcount').val();
                    count = parseInt(count) - parseInt(1);
                    $('#castcount').val(count);
             }); 
        }

在 HTML 页面中包含以下行

 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

HTML

<div class="form-group">
     <label for="cast" class="col-sm-4 control-label">Scene Cast<span class="info"><em class="error">*</em></span></label>
       <div class="col-sm-8">
           <input type="text" class="form-control" name="scenecast" id="scenecast" placeholder="Enter scene cast(max 5)">
           <input type="hidden" id="castcount" value="0" />
               <div id="bigBox" class="tokenize-sample form-control">

               </div>
         </div>
 </div>

您可以为自动完成和选定项目编写自己的 CSS

我就是用这个方法的。我曾经在输入文本字段中从自动完成中选择项目并显示在其下方。您也可以从列表中删除所选项目。