Convert input field to combo box for jQuery autocomplete
This code works correctly. However, I need help to get the "input" tag to appear as a combobox. I tried to create the input field as a combobox with no success. I'm also looking for a way to get the code to work with the combobox by dynamically creating the parameters. Any 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="">
source to share
You can use datalist
to pass parameters text input
which will then turn it intocombobox
I have simplified your code by writing it 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's a JSFIDDLE showing the main features
source to share
After researching, I found the Combo-Box-jQuery-Plugin written by dellsala .
What it is?
Includes a <input type="text">
combo box.
- autocomplete
- keyboard control
- most of the styles can be customized with css
- the list of values can be dynamically changed
What does it look like?
Why am I suggesting this?
It is not meant to expand items <select>
. Many of the other jQuery "combo box" plugins out there are more like searchable selectors with markup labels and values for each parameter. This plugin simply allows the user to select existing text values or provide 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']);
});
source to share
Please check this, it might be helpful
http://jqueryui.com/autocomplete/#combobox
http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox
source to share
You need it? http://jqueryui.com/autocomplete/#combobox
It's pretty simple, just look at it as an entrance, with an anchor at the end.
Just click "View Source" to see how it is implemented.
Good luck!
source to share
Try using select2 .
To populate 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>
source to share
Here's a quick workaround to make your inout look like a select. No code changes required, just HTML / CSS. I made your entrance transparent and put a selection behind it. Your function block is still being processed, but now it looks exactly the same as the selection.
Demo - http://jsfiddle.net/sifriday/xy0mxst4/1/
Trick - do it with 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 above the caption to handle functions:
#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 super-simple, and it looks like it might be exactly what you need - you already have working code, you just need to look a little differently.
This inspires the "good old day" of people using a layer with nice but fake file upload controls on top of the nasty default browser. The real work was done by default and the fake just provided a nice interface. People don't do it that much now that we have FileAPI.
source to share