I have referred many examples from jquery and StackOverflow questions. But no where given example for database values to add into autoplete bobox. That's the reason I have opened this question here.

Please advise why array values are not populating into autoplete bo box ? Here is my sample coding

   (function($) {
$.widget( "custombobox", {
    _create: function() {
      this.wrapper = $( "<span>" )
        .addClass( "custom-bobox" )
        .insertAfter( this.element );

      this.element.hide();
      this._createAutoplete();
      this._createShowAllButton();
    },

    _createAutoplete: function() {
      var selected = this.element.children( ":selected" ),
        value = selected.val() ? selected.text() : "";

      this.input = $( "<input>" )
        .appendTo( this.wrapper )
        .val( value )
        .attr( "title", "" )
        .addClass( "custom-bobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
        .autoplete({
          delay: 0,
          minLength: 3,
          source: $.proxy( this, "_source" )
        })
        .tooltip({
          tooltipClass: "ui-state-highlight"
        });

      this._on( this.input, {
        autopleteselect: function( event, ui ) {
          ui.item.option.selected = true;
          this._trigger( "select", event, {
            item: ui.item.option
          });
        },

        autopletechange: "_removeIfInvalid"
      });
    },

    _createShowAllButton: function() {
      var input = this.input,
        wasOpen = false;

      $( "<a>" )
        .attr( "tabIndex", -1 )
        .attr( "title", "Show All Items" )
        .tooltip()
        .appendTo( this.wrapper )
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass( "ui-corner-all" )
        .addClass( "custom-bobox-toggle ui-corner-right" )
        .mousedown(function() {
          wasOpen = input.autoplete( "widget" ).is( ":visible" );
        })
        .click(function() {
          input.focus();

          // Close if already visible
          if ( wasOpen ) {
            return;
          }

          // Pass empty string as value to search for, displaying all results
          input.autoplete( "search", "" );
        });
    },

    _source: function( request, response ) {

     var autopleteList = [];
     autopleteList=['test1','test2','test3','test4'];
     if(autopleteList.length>0){
      console.log(autopleteList) ;
       for(var j=0;j<autopleteList.length;j++){

        return {
          label:autopleteList[j],
          value:autopleteList[j],
          option:this
       }
      }

     }

    },

    _removeIfInvalid: function( event, ui ) {

      // Selected an item, nothing to do
      if ( ui.item ) {
        return;
      }

      // Search for a match (case-insensitive)
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children( "option" ).each(function() {
        if ( $( this ).text().toLowerCase() === valueLowerCase ) {
          this.selected = valid = true;
          return false;
        }
      });

      // Found a match, nothing to do
      if ( valid ) {
        return;
      }

      // Remove invalid value
      this.input
        .val( "" )
        .attr( "title", value + " didn't match any item" )
        .tooltip( "open" );
      this.element.val( "" );
      this._delay(function() {
        this.input.tooltip( "close" ).attr( "title", "" );
      }, 2500 );
      this.input.data( "ui-autoplete" ).term = "";
    },

    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });
  })(jQuery);

  $(function() {
    $("#bobox")bobox({

    });

    //$("#bobox").closest(".ui-widget").find("input, button").prop("disabled", true);
});

HTML

 <div class="ui-widget">
  <select id="bobox">

</select>
</div>

I have referred many examples from jquery and StackOverflow questions. But no where given example for database values to add into autoplete bobox. That's the reason I have opened this question here.

Please advise why array values are not populating into autoplete bo box ? Here is my sample coding

   (function($) {
$.widget( "custom.bobox", {
    _create: function() {
      this.wrapper = $( "<span>" )
        .addClass( "custom-bobox" )
        .insertAfter( this.element );

      this.element.hide();
      this._createAutoplete();
      this._createShowAllButton();
    },

    _createAutoplete: function() {
      var selected = this.element.children( ":selected" ),
        value = selected.val() ? selected.text() : "";

      this.input = $( "<input>" )
        .appendTo( this.wrapper )
        .val( value )
        .attr( "title", "" )
        .addClass( "custom-bobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
        .autoplete({
          delay: 0,
          minLength: 3,
          source: $.proxy( this, "_source" )
        })
        .tooltip({
          tooltipClass: "ui-state-highlight"
        });

      this._on( this.input, {
        autopleteselect: function( event, ui ) {
          ui.item.option.selected = true;
          this._trigger( "select", event, {
            item: ui.item.option
          });
        },

        autopletechange: "_removeIfInvalid"
      });
    },

    _createShowAllButton: function() {
      var input = this.input,
        wasOpen = false;

      $( "<a>" )
        .attr( "tabIndex", -1 )
        .attr( "title", "Show All Items" )
        .tooltip()
        .appendTo( this.wrapper )
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass( "ui-corner-all" )
        .addClass( "custom-bobox-toggle ui-corner-right" )
        .mousedown(function() {
          wasOpen = input.autoplete( "widget" ).is( ":visible" );
        })
        .click(function() {
          input.focus();

          // Close if already visible
          if ( wasOpen ) {
            return;
          }

          // Pass empty string as value to search for, displaying all results
          input.autoplete( "search", "" );
        });
    },

    _source: function( request, response ) {

     var autopleteList = [];
     autopleteList=['test1','test2','test3','test4'];
     if(autopleteList.length>0){
      console.log(autopleteList) ;
       for(var j=0;j<autopleteList.length;j++){

        return {
          label:autopleteList[j],
          value:autopleteList[j],
          option:this
       }
      }

     }

    },

    _removeIfInvalid: function( event, ui ) {

      // Selected an item, nothing to do
      if ( ui.item ) {
        return;
      }

      // Search for a match (case-insensitive)
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children( "option" ).each(function() {
        if ( $( this ).text().toLowerCase() === valueLowerCase ) {
          this.selected = valid = true;
          return false;
        }
      });

      // Found a match, nothing to do
      if ( valid ) {
        return;
      }

      // Remove invalid value
      this.input
        .val( "" )
        .attr( "title", value + " didn't match any item" )
        .tooltip( "open" );
      this.element.val( "" );
      this._delay(function() {
        this.input.tooltip( "close" ).attr( "title", "" );
      }, 2500 );
      this.input.data( "ui-autoplete" ).term = "";
    },

    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });
  })(jQuery);

  $(function() {
    $("#bobox").bobox({

    });

    //$("#bobox").closest(".ui-widget").find("input, button").prop("disabled", true);
});

HTML

 <div class="ui-widget">
  <select id="bobox">

</select>
</div>

• javascript
• jquery
• jquery-ui
• autoplete
• javascript-objects

Share Improve this question Follow edited Oct 8, 2018 at 15:32 user2848031 asked Oct 3, 2018 at 19:59 user2848031user2848031 2271313 gold badges3838 silver badges7272 bronze badges 1

• Please provide an example of the result data that is expected. What would autopleteList look like? – Twisty Commented Oct 6, 2018 at 1:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +100

only change bobox select items; changing bobox select items automatically updates autoplete

    $('#bobox').empty();
    for (var i = start_index; i < start_index + 4; i++) {
        $('#bobox').append(' <option value=test"' + i + '">test' + i + '</option>');
    }

 $( function() {
   
   var autopleteList = [];
     autopleteList=['test1','test2','test3','test4'];
      
   for(var i=0; i<autopleteList.length; i++){
     
             $('#bobox').append(' <option value="' + autopleteList[i] + '">' + autopleteList[i] + '</option>');

   }
   
    $.widget( "custom.bobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-bobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutoplete();
        this._createShowAllButton();
      },
 
      _createAutoplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-bobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autoplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
 
        this._on( this.input, {
          autopleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autopletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-bobox-toggle ui-corner-right" )
          .on( "mousedown", function() {
            wasOpen = input.autoplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autoplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autoplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
 
    $( "#bobox" ).bobox();
      $('.custom-bobox-input').val('');
   var start_index=5;
    $( "#btnUpdate" ).on( "click", function() {
      $('#bobox').empty();
    for (var i = start_index; i < start_index + 4; i++) {
        $('#bobox').append(' <option value=test"' + i + '">test' + i + '</option>');
    }
      
      $('.custom-bobox-input').val('');
      start_index+=5;
    });
  } );

.custom-bobox-toggle {
     padding: 13px!important;
    margin-top: -2px!important;

}
.wrapper {
margin:30px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"><link rel="stylesheet" href="https://code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<div class="wrapper">
<div class="ui-widget">
  <select id="bobox">

</select>
</div>
<br>
<input type="button" id="btnUpdate" class="btn btn-default" value="update" >
<div>

I would advise something like:

$(function() {
  $("#bobox").bobox({
    source: function(req, resp) {
      var autopleteList = [];
      var results = [];
      session.run('MATCH (n) RETURN n.name').then(function(result) {
        $.each(result.records, function(k, r) {
          autopleteList.push(r._fields[0]);
        });
      });
      if (req.term.length) {
        results = $.ui.autoplete.filter(autopleteList, req.term);
      } else {
        results = autopleteList;
      }
      resp(results);
    },
    select: function(event, ui) {
      $('#log').text('selected ' + $("#bobox").val());
    }
  });
});

This will over ride the source callback and perform the needed activity to collect the full list, and if the user has typed anything, reduce the list to those items matching what was typed.

Since this bobox is custom, I do not think there is a selected callback. Autoplete uses select callback. So I would try that first. Otherwise you can create a selected callback in your code.

Otherwise, collect your list before initializing your ComboBox. Hope that helps.

Here is an example on how to do it, I just created an array to loop over because I don't have access to the session object.

var autopleteList = [];

$(document).ready(function() {

	var records = ['test', 'test 2', 'test 3']

    records.forEach(function(record) {
      autopleteList.push(record);
    });
    
    $( "#tags" ).autoplete({
      source: autopleteList
    });
    
});

<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery./jquery-2.2.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>