4

There is combobox with autocomplete enabled. How to pass JSON data as source for this combobox?

Upd. I've found partial answer here - it allows me to use remote data source (original var input = this.input = $( "<input>" ).autocomplete({ source is replaced with remote source). But I can not choose the value - looks like the problem is with the following code (it allows to choose values from the select options (which I don't have).

  select: function( event, ui ) {
    ui.item.option.selected = true;
    self._trigger( "selected", event, {
      item: ui.item.option
    });
  },

How to fix that?

Here is the demo.

Improve this question
2
  • Can you add the json data ? is it remote ? Commented Nov 4, 2011 at 15:09
  • Then my answer below gives you a good example Commented Nov 4, 2011 at 17:27

3 Answers 3

Reset to default
2

Here is the working example - http://jsfiddle.net/and7ey/TFerw/3/

Remote end should return some values (most popular) in case when empty term is requested - it happens when user presses combobox button.

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

3 Comments

Btw, it doesn't work fully properly - value of the combobox always equal to the initial value.
Yes, but it's trivial to fix: input.autocomplete("search", input.value); Have a look at: jsfiddle.net/SjcP5/1
@SeanCameron I have updated your fiddle and fixed a small bug. Take a look at: jsfiddle.net/gzuri/4wutG/1/
0

Example taken from the link you added in your question :

        $( "#birds" ).autocomplete({
            source: "search.php", // remote site
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
Improve this answer

2 Comments

I have combobox, not standard autocomplete. I've tried to call $( "#cbCity" ).combobox(); and then $( "#cbCity" ).autocomplete(... with your code - it doesn't work.
@LA_ Can you add your javascript code to your question or use jsfiddle.net then I will take another look
0

I just used next construction: 1. In combobox.js I put code from example that appears on https://jqueryui.com/autocomplete/#combobox and had changed _create & _createAutocomplete functions as follows:

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

        var autocompleteSetup = this.options.autocompleteSetup;
        this.element.hide();
        this._createAutocomplete( autocompleteSetup );
        this._createShowAllButton();
    }

    _createAutocomplete: function(setupObject) {
...
this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete(setupObject)...

  1. From page code where I'm creating the combo I am calling the create code as follows:

    var options = { autocompleteSetup : { delay: 100, minLength: 2, source: "http://your/data/hook/url" } }; $( "#subzero" ).combobox(options);

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.