jQuery UI autocomplete object not returning anything

Question

I am having problems trying to get an autocomplete field populating with AJAX. One account user can have multiple members associated to it.

I have taken a step back by manually defining the array to get it working but something is still wrong. I assume it's something in my jQuery UI script as it's a big question mark for me at the moment.

The functionality I'm trying to create is that the user can start entering the name of a member (eg Smith, John) and selects it, the page will impersonate the user and reload the same page but appending the path with (in the example of Smith, John it would return ?_switch_user=jsmith)

HTML code:

<form class="navbar-form navbar-left" role="search">
   <div class="form-group">
      <input type="search" id="search-names" class="form-control" placeholder="Enter member name">
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

jQuery UI script:

var UserArray = [
  { "label": "Smith, John", "value": "jsmith" },
  { "label": "Doe, Jane", "value": "jdoe1990" }
];

$( "#search-names" ).autocomplete({
  source: UserArray,
  minLength: 2,
  change: function() {
    var UserArray = $(this).val();
    if (!UserArray) return;

    window.location = window.location + '?_switch_user=' + UserArray.value
  }
});

If i'm not mistaken, autocomplete only takes an array of strings, not objects? I could be wrong on this. EDIT: I was wrong indeed. It does take objects. Didn't know that :) — Jorrex
– Jorrex, Commented Jan 5, 2016 at 15:17
Two things you have to change. 1) change your variabele name in your change() since it's the same as your array. 2) "label" and "value" should not be with quotes, but without them. see this fiddle: jsfiddle.net/Jorrex/wxh77sue — Jorrex
– Jorrex, Commented Jan 5, 2016 at 15:31
Thanks very much @Jorrex - I thought the variable in change() was assigning the previous UserArray...(!) — Bendy
– Bendy, Commented Jan 5, 2016 at 15:41

vorillaz · Accepted Answer · 2016-01-05 15:30:57Z

1

This should do the trick:

$("#search-names").autocomplete({
    source: UserArray,
    minLength: 2,
    select: function(event, matched) {
        console.log(matched)
        window.location = window.location + '?_switch_user=' + matched.item.value
    }
  });

Demo

answered Jan 5, 2016 at 15:30

vorillaz

6,3062 gold badges32 silver badges46 bronze badges

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

2 Comments

Bendy Over a year ago

Worked perfectly thanks @Theodore :) .....now I just need to figure out how to get Symfony to wrap the data from my database into the structure of [ { "label": "Smith, John", "value": "jsmith" }, { "label": "Doe, Jane", "value": "jdoe1990" } ];...!

vorillaz Over a year ago

If your data has different structure you can use a decorator to match autocomplete's desired input structure. Take a look at this answer stackoverflow.com/questions/28176552/…

Jorrex · Accepted Answer · 2016-01-05 15:37:49Z

1

It's pretty simple what is wrong with your code.

1) You're using UserArrayfor your array of objects, but in the change() function, you declare another variable with the same name. This should be different from each other.

2) the property names in your objects shouldn't be enclosed with "".

See the code below or in this fiddle

HTML

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
  <input type="search" id="search-names" class="form-control" placeholder="Enter member"/>
  </div>
  <button type="submit" class="btn btn-default">
  Submit
  </button>
</form>

jQuery

var userArray = [
  {
    label: "Smith, John",
    value: "jsmith"
  },
  {
    label: "Doe, Jane",
    value: "jdoe1990"
  }
];

$("#search-names").autocomplete({
    source: userArray,
  minLength: 2,
  change: function() {
    var user = $(this).val();
    if(!user) return;

    window.location = window.location + "?_switch_user=" + user;
  }
})

answered Jan 5, 2016 at 15:37

Jorrex

1,5003 gold badges13 silver badges34 bronze badges

1 Comment

Bendy Over a year ago

Thanks @Jorrex - I tried that too and works well too thanks. I suppose label/value not wrapped in quotes is better practice? In case it's of help for others - this approach populates the text field with value strings whereas the other given answer populates the text field with ``label` strings

Collectives™ on Stack Overflow

jQuery UI autocomplete object not returning anything

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related