how to display mutiple autocomplete value in a textbox after a successful ajax

Question

The code I'm writing does not display the autocomplete multiple value that were already retrieve successfully by Ajax. my html for display is

<input type="text" name="s_to" id="s_to" class="controls">

My jquery:

<script>

$("#s_to").keyup( function() { 
    url = "<?php echo base_url(); ?>index.php/<?php echo $loc_pts; ?>/ajax_email";       
    $( "#s_to" ).autocomplete({
        source: function( request, response ) {

            var s_to = extractLast(request.term);
            $.ajax({
                url: url,
                type: "POST",
                data: {s_to: s_to},
                dataType: "json",
                success:function(response) {
                    response.s_to;
                }
            });
        },focus: function() {                
            return false;
        },
        select: function( event, ui ) {
            var terms = split( $('#s_to').val() );

            terms.pop();               

            if(duplicate($('#s_to').val(), ui.item.label)){
                terms.push( ui.item.label );

                terms.push( "" );
                $('#s_to').val(terms.join( ", " ));            
            }
            return false;
        }

    });
});

function duplicate(f,s){
  if( f.match(new RegExp("(?:^|,)"+s+"(?:,|$)"))) {
     return false;
   }else{
  return true;
   }
}   

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

function extractLast( term ) {
  return split( term ).pop();
}

I expect I can insert multiple input in a textbox but no selection were being output. Thus I cannot autocomplete the input either by clicking or keyboard arrow keys

You can check [this answer](https://stackoverflow.com/a/33415372/4285019) and let me know if it fix your problem or not — Web Stair, Oct 02 '19 at 12:21
@ForwardWeb the problem is different since he dynamically add an element while I'm restricted to follow my themes. I only need the suggestion dropdown to comeout since the ajax part already return correct data. — Yeo Chins, Oct 03 '19 at 01:31

score 0 · Accepted Answer · answered Oct 05 '19 at 09:27

I think you have a problem in your source function. You don't call the response callback (the second argument of the function), so the source is never set. This should work:

source: function( request, response ) {
 var s_to = extractLast(request.term);
 $.ajax({
   url: url,
   type: "POST",
   data: {s_to: s_to},
   dataType: "json",
   success:function(re) {
     response(re.s_to);
   }
 });
}

how to display mutiple autocomplete value in a textbox after a successful ajax

1 Answers1