Home/ Questions/Q 8735221
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:00:25+00:00

What: I want to crate an autocomplete, where admin can select a user from

  • 0

What:
I want to crate an autocomplete, where admin can select a user from dropdown list.
Also, I want to display the ID of selected user on my page.

Problem: The problem I’m getting is the blank dropdown autocomplete field, and I don’t know how to solve this. Also the ID is not updating.

The code

Javascript:

// Values
var names = [
    {
    id: 1,
    name: 'Max'},
{
    id: 2,
    name: 'John'},
{
    id: 3,
    name: 'Gray'},
{
    id: 4,
    name: 'Bob'},
{
    id: 5,
    name: 'Terminator'}
];

// Autocomplete start..
$('#suggested-users').autocomplete({
    source: names,
    select: function() {
        $('#user-id').html(ui.item.id);
    }
});​

HTML:

<html>

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
    </head>

    <body>
        <input type="text" id="suggested-users">
        <hr>
        <p><strong>ID:</strong><span id="user-id"></span></p>
    </body>

</html>​

JSFiddle: JSFiddle

Thanks for your answers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this jsFiddle example

    var opt;
// Values
var names = [
    {
    label: 'Max',
    value: 1},
{
    label: 'John',
    value: 2},
{
    label: 'Gray',
    value: 3},
{
    label: 'Bob',
    value: 4},
{
    label: 'Terminator',
    value: 5}
];

// Autocomplete start..
$('#suggested-users').autocomplete({
    source: names,
    select: function(e, ui) {
        $('#user-id').html(ui.item.value);
        opt = ui.item.label;
    },
    close: function() {
        $('#suggested-users').val(opt);
    }
});​
    • 0