Jquery-ui-autocomplete for multiple values with comma separated items not working

Question

I am working on jquery-ui-autocomplete ,but my requirement is for multiple values with comma separated ,the code i have written is working only for single value I tried this abut this didn't worked for me with that I have few requirement like

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);
        }
    }
});

Rajkumar · Accepted Answer · 2019-03-27 12:21:18Z

3

Just Small changes in your code and try this working fine for me.

 $( 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"/>

Change your php code

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

echo json_encode($response);

edited Mar 27, 2019 at 12:21

answered Mar 26, 2019 at 10:29

Rajkumar

1,0679 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anonymous Over a year ago

I am facing one issue with this code ,when we select first value it will appear selected value second time when we type and select any value but while selecting value if we use mouse click then only it will take multiple value else second value erase previous value

Anonymous Over a year ago

from your side try to select both values using keyboard click instead of mouse click

Rajkumar Over a year ago

i have updated code . I have added two 1) focus: function() { return false; }, 2) check condition function dublicate(f,s){ if( f.match(new RegExp("(?:^|,)"+s+"(?:,|$)"))) { return false; }else{ return true; } }

Anonymous Over a year ago

thanks working fine, last thing i want to know how to remove duplicate values like once selected value should not display next time

Collectives™ on Stack Overflow

Jquery-ui-autocomplete for multiple values with comma separated items not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related