當文本輸入類似於值時，JQuery更改選擇選項

Question

我有一個文本輸入和一個select元素。

我的選擇值是全部數字，但是顯示的是產品名稱。

我怎樣才能使當在文本輸入一個用戶類型或更改文本輸入所選選項的變化，但我想選擇中選擇元素的選項，其中顯示的是像在文字輸入的值

// 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="">Select</option> 
 
    <option value=1>Domain Registration (.co.uk)</option> 
 
    <option value=2>Domain Registration (.co)</option> 
 
    <option value=3>Domain Registration (.com)</option> 
 
    <option value=2>Domain Registration (.uk.com)</option> 
 
</select>

Answer 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 
      } 
     }); 
    }); 
}); 

新小提琴：http://jsfiddle.net/chirag1goel/Lvn9vfcx/2/

Answer 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>

UPDATE：

如果你想匹配類型值，然後使用

// 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()); 
 
});

<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=2>ajkl</option> 
 
    <option value=1>abc</option> 
 
    <option value=2>def</option> 
 
    <option value=3>ghi</option> 
 
    <option value=2>jkl</option> 
 
    <option value=2>jkl</option> 
 
    <option value=2>ajkl</option> 
 
    <option value=2>jklaa</option> 
 
    <option value=2>jklsdd</option> 
 
    <option value=2>dddsjkl</option> 
 
    <option value=2>eeeejkl</option> 
 
    <option value=2>.co.in</option> 
 
    <option value=2>.co</option> 
 
</select>

Answer 3

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>

工作例如：http://jsfiddle.net/5cdyu5yx/