| 1 | | |
| 2 | | {{{ |
| 3 | | var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}]; |
| 4 | | |
| 5 | | $("#txtAutocomplete").autocomplete({ |
| 6 | | source: mySource, |
| 7 | | select: function(event, ui){ |
| 8 | | if(ui.item){ |
| 9 | | //console.log('select', ui.item.label); |
| 10 | | $("#hiddenField").val(ui.item.id); |
| 11 | | return ui.item.label; |
| 12 | | } |
| 13 | | else{ |
| 14 | | //console.log('select with null value'); |
| 15 | | $("#hiddenField").val(''); |
| 16 | | } |
| 17 | | }, |
| 18 | | change: function(event, ui){ |
| 19 | | if(ui.item){ |
| 20 | | //console.log('change', ui.item.id); |
| 21 | | $("#hiddenField").val(ui.item.id); |
| 22 | | } |
| 23 | | else{ |
| 24 | | //console.log('change with null value'); |
| 25 | | $("#hiddenField").val(''); |
| 26 | | } |
| 27 | | } |
| 28 | | }); |
| 29 | | |
| 30 | | <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> |
| 31 | | <script src="https://code.jquery.com/jquery-1.11.3.js"></script> |
| 32 | | <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> |
| 33 | | <p> |
| 34 | | <ol> |
| 35 | | <li>Type 'Value' in the text box</li> |
| 36 | | <li>Press 'arrow down' to select the first element</li> |
| 37 | | <li>Press enter</li> |
| 38 | | <li>Keep pressed backspace to delete completely the selected item</li> |
| 39 | | <li>Press TAB</li> |
| 40 | | <li>Value in 'readonly' field is still there</li> |
| 41 | | </ol> |
| 42 | | </p> |
| 43 | | |
| 44 | | <input type="text" id="txtAutocomplete"> |
| 45 | | <input type="text" id="hiddenField" disabled="disabled"> |
| 46 | | |
| 47 | | <button>Button added just to have an element to focus on</button> |
| 48 | | }}} |
| | 1 | I provided a simple snippet, please see: [https://jsfiddle.net/zcaszs38/2/] |