Convert input box to combobox for jQuery autocomplete

Question

This code is functioning correctly. However, I need help getting the "input" tag to display like a combobox. I have tried to styled the inputbox as a combobox without success. I am also looking for a way to make the code work with a combobox by building the options dynamically. Any and all help is appreciated.

 $(function () { var availableTags = new Array(1000000); var j = 0; for (var i = 1; i < availableTags.length; i++) { availableTags[j++] = i.toString(); } $("#tags").autocomplete({ source: function (req, responseFn) { var re = req.term; var matcher = new RegExp("^" + re, "i"); var a = $.grep(availableTags, function (item) { return matcher.test(item); }); responseFn(a.slice(0, 5)); }, select: function (event, ui) { if (ui.item && ui.item.value) { var titleinput = ui.item.value; ui.item.value = $.trim(titleinput); alert(ui.item.value); } }, change: function (event, ui) { if (!valid) { // remove invalid value, as it didn't match anything $(this).val(""); select.val(""); return false; } } }); }); 

 .custom-combobox { position: relative; display: inline-block; border-style: solid; border-width: 1px; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } /* .custom-combobox-list-item { color: blue; font-weight: bold; } .custom-combobox-input , .custom-combobox-list-item.ui-state-focus { color: black; font-weight: bold; font-style: italic; } */ #tags { width: 40px; } 

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <label for="tags">Tags: </label> <input id="tags" type="text" class="custom-combobox" value=""> 

Answer 1

You could use a datalist to transfer the options to the text input which will then turn it into a combobox

I slimmed your code write down to the very basics to make a simple example.

<label for="tags">Tags: </label>
<input id="tags" name="tags" type="text" list="options" class="custom-combobox" value="">

<datalist id="options">
    <!-- it puts the options here then the input type text gets them as select options -->
</datalist> 

$(function () {
  var availableTags = new Array(10);
  var j = 0;
  for (var i = 1; i < availableTags.length; i++) {
    $('#options').append("<option value='" + i + "'>");
  }

});

here is a JSFIDDLE showing the basic functionality

Answer 2

After a research I found Combo-Box-jQuery-Plugin written by dellsala .

What is it ?

Turns a <input type="text"> into a combo box.

• autocomplete
• keyboard controls
• most styles can be customized via css
• list of values can be changed dynamically

How it looks like ?

Why I suggest that ?

This is not intended for extending <select> elements. Many other jquery "combo box" plugins out there behave more like searchable select elements with disctinct labels and values for each option. This plugin simply allows the user to choose from existing text values or supply their own.

How to use ? http://jsfiddle.net/csdtesting/eh0gse2f/

<div class="inputCombox">
    <label for="input1">Field1:</label>
    <input id="input1" type="text" value="" />
</div>
<div class="inputCombox">
    <label for="input2">Field2:</label>
    <input id="input2" type="text" value="" />
</div>

jQuery(function () {
    var varValue = 12;
    var aval = [
        'Yo',
        '1',
        'Jo',
    varValue.toString()];

    //#Example 1 
    jQuery('#input1').combobox(aval);

    //#Example 2 
    jQuery('#input2').combobox([
        'Yo',
        '1',
        'Jo']);     
});

Answer 3

Please Check this it might be helpful

http://jqueryui.com/autocomplete/#combobox

http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox

Answer 4

Do you need this? http://jqueryui.com/autocomplete/#combobox

It's pretty simple, just look that is an input, with an anchor at the end.

Just click on "view source" to see how it's implemented.

Good luck!

Answer 5

Try the bootstrap tags

$("#tags").tagsinput("Amsterdam,Washington,Los Angeles");

Bootstrap Tags Input

Answer 6

Try to use select2 .

To populate the Select2 with an ajax call, try this:

PHP:

<?php
    $result = array();

    //Do something with the search string ($searchfor), eg. find the desired results
    $result[] = array('id' => '1', 'text' => '101');
    $result[] = array('id' => '2', 'text' => '102');
    $result[] = array('id' => '3', 'text' => '103');
    $result[] = array('id' => '4', 'text' => '104');
    $result[] = array('id' => '5', 'text' => '105');

    //Send the ajax results formatted as JSON
    print(json_encode($result));    
?>

HTML:

<input type="hidden" id="tags" value="" style="width: 300px;">
<script>
$('#tags').select2({
    minimumInputLength: 2,
    ajax: {
        url: 'http://yourdomain.com/ajax.php',
        dataType: 'json',
        type: "GET",
        quietMillis: 100,
        data: function (term) {
            return {
                searchfor: term
            };
        },
        results: function (data) {
            return {
                results: data
            };
        }
    }
});
</script>

Answer 7

Here's a quick workaround to make your inout look like a select. No code changes needed, just some HTML/CSS. I made your input transparent, and layered a select behind it. The functionality is still handled by your input, but now it looks exactly like the select.

Demo - http://jsfiddle.net/sifriday/xy0mxst4/1/

Trick - Do this with the HTML:

<div id="wrapper">
  <select id="fake-tags"></select>
  <input id="tags" type="text" class="custom-combobox" value="" />
</div>

and add this CSS to make the input appear above the select to handle the functionality:

#tags {
  width: 40px;
  border: 0;
  background: none;
  margin-left: -50px;
}
#tags:focus {
  outline: 0
}
#fake-tags {
  width: 50px;
}

It's a hack, but it's a super-simple one and it sounds like it might be just what you need - you already have working code, you just need it to look a bit different.

This is inspired by the 'good old day's, when people used to layer a nice looking but fake file upload control on top of the nasty default browser one. The default did the real work, and the fake one just provided the nice UI. People don't do this so much now that we have the FileAPI.

Answer 8

I will place the image of a clickable down arrow next to the textbox. I will display 1 to 10 in the list box if the user clicks the image instead of entering data into the text box.