我有一个文本输入和一个选择元素。
我的选择选项值都是数字，但显示的是产品名称。
如何在用户输入文本输入或更改文本输入时更改所选选项但我想在select元素中选择显示类似于文本输入中的值的选项
with recursive allrecords as -- this merges the input tables. Add a unique row identifier
(
select *, row_number() over (ORDER BY startdate) as rowid from
(select * from table1
UNION
select * from table2) a
),
path as ( -- the recursive CTE. This gets the sequences
select rowid as parent,rowid,startdate,enddate from allrecords a
union
select p.parent,b.rowid,b.startdate,b.enddate from allrecords b join path p on (p.enddate + interval '1 day')>=b.startdate and p.startdate <= b.startdate
)
SELECT id,g.startdate,g.enddate FROM -- outer query to get the id
-- inner query to get the start and end of each sequence
(select parent,min(startdate) as startdate, max(enddate) as enddate from
(
select *, row_number() OVER (partition by rowid order by parent,startdate) as row_number from path
) a
where row_number = 1 -- We only want the first occurrence of each record
group by parent)g
INNER JOIN allrecords a on a.rowid = parent
// Event handler for text input
$('#txt').on('input', function() {
// Getiing option based on input value and setting it as selected
$('#sel option:contains(' + this.value + ')').eq(0).prop('selected', true);
});
// Event handler for select
$('#sel').change(function() {
// Updating text input based on selected value
$('#txt').val($('option:selected', this).text());
});
答案 0 :(得分：1)
你可以像这样接近它，
HTML：
<input type="text" id="input">
<select id="selectId">
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
jQuery的：
$(document).ready(function(){
$("#input").change(function(){
var val = $("#input").val();
$("#selectId > option").each(function() {
if(this.text == val) {
$("#selectId > option").removeAttr("selected");
$(this).attr("selected","selected");
}
});
});
});
请找到jsfiddle：http://jsfiddle.net/chirag1goel/Lvn9vfcx/1/
编辑：使用子字符串匹配。
$(document).ready(function(){
$("#input").change(function(){
var val = $("#input").val();
$("#selectId > option").each(function() { //Run through the loop of each option
if(this.text.indexOf(val)>=0) { //Find if the string present as substring
$("#selectId > option").removeAttr("selected"); //Remove the existing selected option
$(this).attr("selected","selected"); //Select this matching option as selected
return false; //Return after first match is found
}
});
});
});
答案 1 :(得分：0)
你可以这样做，
struct A { int a; }
struct B { int b; }
mixin CatStruct!("AB", A, B);
AB ab;
ab.a = 1; ab.b = 2;
// Event handler for text input
$('#txt').on('input', function() {
// Getiing option based on input value and setting it as selected
$('#sel option:contains(' + this.value + ')').eq(0).prop('selected', true);
});
// Event handler for select
$('#sel').change(function() {
// Updating text input based on selected value
$('#txt').val($('option:selected', this).text());
});
更新：
如果要匹配键入的值，请使用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="txt" />
<select id="sel">
<option value=1>abc</option>
<option value=2>def</option>
<option value=3>ghi</option>
<option value=2>jkl</option>
</select>// Event handler for text input
$('#txt').on('input', function() {
var val = this.value;
// Getiing option based on input value and setting it as selected
$('#sel option').filter(function() {
return $(this).text() == val;
}).eq(0).prop('selected', true);
});
// Event handler for select
$('#sel').change(function() {
// Updating text input based on selected value
$('#txt').val($('option:selected', this).text());
});
或者带有排序结果的复杂事物
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="txt" />
<select id="sel">
<option value=1>abc</option>
<option value=2>def</option>
<option value=3>ghi</option>
<option value=2>jkl</option>
</select>// Event handler for text input
$('#txt').on('input', function() {
var val = this.value;
// Getiing option based on input value and setting it as selected
$('#sel option:contains(' + this.value + ')').sort(function(a, b) {
var a1 = $(a).text(),
a2 = $(b).text();
console.log(a1.indexOf(val),a2.indexOf(val));
if (a1.indexOf(val) > a2.indexOf(val))
return 1;
else if (a1.indexOf(val) < a2.indexOf(val))
return -1;
if (a1.length > a2.length)
return 1;
else if (a1.length > a2.length)
return -1;
return 0;
}).eq(0).prop('selected', true);
});
// Event handler for select
$('#sel').change(function() {
// Updating text input based on selected value
$('#txt').val($('option:selected', this).text());
});
答案 2 :(得分：0)
var input = document.querySelector(".input");
var select = document.querySelector(".selectItem");
var storage = {};
var nodes = select.childNodes;
for(i=0; i<nodes.length; i++) {
var value = nodes[i].innerHTML;
if(typeof value != "undefined") {
storage[value.toLowerCase()] = nodes[i].getAttribute('value');
}
}
input.addEventListener("input", function() {
if(typeof storage[input.value.toLowerCase()] != "undefined") {
select.querySelector('[value="'+storage[input.value.toLowerCase()]+'"]').setAttribute("selected", true);
}
}, false);<input type="text" class="input"/>
<select class="selectItem">
<option selected value="1">Internet Explorer</option>
<option value="2">Chrome</option>
<option value="3">Firefox</option>
<option value="4">Safari</option>
<option value="5">Opera</option>
<option value="6">Edge</option>
</select>