0

My problem is when using Jquery UI autocomplete and tag plugin (XOXCO) together, once I select one of the autocomplete suggestions it should add the tag right away, but what happens is that upon the selection, the suggestions disappear and though the value is written to the tags-id input correctly still the label itself does not show as a tag unless I press enter, if I don't then the tag won't be added correctly.
I think I should tell the tag plugin to go ahead and create the tag once I trigger the select event from the autocomplete plugin.. but I'm not able to get it done.

Here is my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Search Locations</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.min.css" />

    <style>body {   font-family: Arial, Helvetica, sans-serif;}
    table {font-size: 1em;}
    .ui-draggable, .ui-droppable {background-position: top;}
    .ui-autocomplete { line-height:24px; }
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover 
    { border: 1px solid #000; background: #000; }
    .ui-menu-item { margin: 0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; }
    .ui-autocomplete li.ui-menu-item { padding: 1px; width:350px; }
    .ui-menu-item a { text-decoration: none; display: block; padding: .2em .4em; line-height: 1.5; zoom: 1; }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="js/jquery.tagsinput.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

    $( "#tags" ).tagsInput({ 
    width: 'auto',
    interactive:true,
   defaultText:'add a piece of data',
    });
    $( "#tags_tag" ).autocomplete({
    minLength: 2,
    source: function (request, response) {
                    $.ajax({
                        url: "xxxtestjsondata77.asp",
                        data: {term:request.term}, 
                        type: 'GET', 
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (data) {
                            response(data);
                        } // close success
                    }); // close ajax
                }, // close source,

    select: function( event, ui ) {
                  $( "#tags_tag" ).val( ui.item.label );
                  $( "#tags-id" ).val( ui.item.value );
                  return false;
               },
    focus: function( event, ui ) {
                  $( "#tags_tag" ).val( ui.item.label );
                  return false;
               }

    });
    $( "#tags_tag" ).autocomplete( "instance" )._renderItem = function( ul, item ) {

        var term = this.element.val(),
            regex = new RegExp( '(' + term + ')', 'gi' );
        t = item.label.replace( regex , "<b>$&</b>" );
        return $( "<li>" )
            .append( "<a>" + t + " | " + item.desc + "</a>")
            .appendTo( ul );

       }; 

  } ); // close document


  </script>

  </head>
  <body>
    <h1>Add Data</h1>
<div class="ui-widget">
    <label for="tags" type="text">Tags: </label>
    <input name="tags" id="tags" />
    <input type="hidden" id="tags-id">
</div>
</body>
</html>

part of the JSON File Data (xxxtestjsondata77.asp):

[ 
{ "label": "Data 1", "desc":"Data 1 desc", "value":"111" } , 
{ "label": "Data 2", "desc":"Data 1 desc", "value":"222" } , 
{ "label": "Data 3", "desc":"Data 1 desc", "value":"333" } } 
]
Code Reaper
  • 143
  • 1
  • 9
  • Welcome to Stack Overflow. Why are you wrapping the rendered itemwith ``? I would expect it to be wrapped with `
    `.
     – Twisty May 27 '18 at 15:36
  • @Twisty .. Thnx.. actually for no specific reason, I just used some of the help of the `autocomplete monkey-patching` in the answer of *@cheeso* here [link](https://stackoverflow.com/a/2436493/9811575) and the `_renderItem` variable was wrapped in an `anchor` not a `div`. – Code Reaper May 27 '18 at 21:12
  • @Twisty.. actually the `Jquery UI autocomplete` is working fine on its own and the `tag plugin` is working fine on its own .. but when I used them together, I needed the `tag plugin` to do something different which is to add the tag when the user selects a suggestion from the autocomplete not upon pressing the `enter` key .. but I'm not able to get it done. – Code Reaper May 27 '18 at 21:22
  • I am not familiar with this tag plugin. Since you advise that it works when Enter is hit, I suspect that this is triggering `change` or `submit` event. Since you're populating the field programmaticly, `change` is not executed. Maybe add `$("#tags-id").trigger("change");` – Twisty May 27 '18 at 21:41
  • ah~ I finally did it.. I was thinking upside down.. I was trying to manipulate the `tag plugin` to add the tag but the answer was in the `autocomplete plugin` in the `select` function I added `$('#tags').addTag(ui.item.label);` instead of `$( "#tags_tag" ).val( ui.item.label );` .. tada~ :) – Code Reaper May 29 '18 at 00:31

1 Answers1

0

I found the answer, and I'm adding it here for anyone who would want to know it.

Within the autocomplete plugin in the select function I added $('#tags').addTag(ui.item.label); instead of $( "#tags_tag" ).val( ui.item.label ); like this:

select: function( event, ui ) {
                  $('#tags').addTag(ui.item.label);
                  $( "#tags-id" ).val( ui.item.value );
                  return false;
               },

and it worked like a charm.

Code Reaper
  • 143
  • 1
  • 9