Jquery-ui-autocomplete для нескольких значений с разделенными запятыми элементами не работает

Question

Я работаю над jquery-ui-autocomplete, но мое требование состоит в том, чтобы несколько значений были разделены запятыми, написанный мною код работает только для одного значения. Я пробовал этот пример, но у меня это не получилось.несколько требований как

1) when search/autocomplate  in text box it should get username and id of that user but id not show to front end just binded with user names
2)selected usernames show in text box with multiple values using comma separated (currently it is working for single user only comma is appending but multiple values not)
3) whenever selected any username  id associated with that user append into hidden field  " name='hidden_id[]'  "

<input type="text" name="search_val" class="form-control search_val"/>

<input type="hidden" name="hidden_id[]" class="hidden_id" value=""/>

<script>
$(function () {
    $(document).ready(function () {
        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }
        $(".search_asset").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "<?php echo SITE_URL . 'ajax/get_users'; ?>",
                    dataType: "json",
                    data: {
                        term: request.term, request: 1
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },

            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(",");
                return false;
            }
        });

    });


    public function get_users() {
        $term = $_GET['term'];
        $result = $this -> db -> query("select userid,username from users WHERE username LIKE '%".$term."%' ") -> result();
        if (count($result) > 0) {
            foreach($result as $row)
            $arr_result[] = $row -> username;
            $arr_result[] = $row -> userid;
            echo json_encode($arr_result);
        }
    }
});

Answer 1

Просто небольшие изменения в вашем коде, и попробуйте это нормально для меня.

 $( function() {        
        $( ".search_val" ).autocomplete({
            source: function( request, response ) {
                
                var searchText = extractLast(request.term);
                $.ajax({
                    url: "<?php echo SITE_URL . 'ajax/get_users'; ?>",
                    type: 'get',
                    dataType: "json",
                    data: {
                        search: searchText
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },focus: function() {                
                return false;
            },
            select: function( event, ui ) {
                var terms = split( $('.search_val').val() );
                
                terms.pop();               

               if(duplicate($('.search_val').val(), ui.item.label)){
                terms.push( ui.item.label );
                
                terms.push( "" );
                $('.search_val').val(terms.join( ", " ));            
                 }
                return false;
            }
           
        });
    });

    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
function duplicate(f,s){
  if( f.match(new RegExp("(?:^|,)"+s+"(?:,|$)"))) {
    	return false;
   }else{
	   return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <input type="text" name="search_val" class="form-control search_val"/>

Измените ваш php код

while ($ row = mysqli_fetch_array ($ result)) { $ response [] => array ("value" => $ row ['userid'], "label" => $ row ['username']); }

echo json_encode ($ response);