Return value of a JQuery autocomplete using an array of objects as its source

Question

In a JQuery autocomplete which uses an array of objects as its source, can I display the label in the INPUT and later access the value? The default behavior is that the value is displayed in the INPUT after selection. In this case the values represent indexes to unique keys in rows in a table.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
    <label for="autocomplete">Select a programming language: </label>
    <input id="autocomplete">
    <script>
    $( "#autocomplete" ).autocomplete({
      source: [ { label:"c++", value:1 }, { label: "java", value:2 }, { label: "javascript", value:3 } ]
    });
    </script>
</body>
</html>

possible duplicate of JQuery autocomplete how to write label in autocomplete text input? — Salman Arshad
– Salman Arshad, Commented Oct 25, 2013 at 21:15

Edward Lee · Accepted Answer · 2013-10-25 21:51:41Z

1

Set val of the input by selected label to display the label instead of its value

$( "#autocomplete" ).val( ui.item.label );

Add data attribute on the input

<input id="autocomplete" data-value>

and store selected value

$( "#autocomplete" ).attr("data-value",ui.item.value);

Here is JSFiddle

answered Oct 25, 2013 at 21:51

Edward Lee

9515 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Return value of a JQuery autocomplete using an array of objects as its source

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related