CODEWITHSUNDEEP
javascriptphphtmlajax
tech_geek
tech_geek

Reputation: 1854

How to select dropdown by inserting value in the text box

Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.

Here is my html code!

<div class="form-group">
                <label class="col-sm-4 control-label">Scheme**</label>
                <div class="col-sm-4">
                    <select class="form-control" name="scheme" id="scheme">
                        <?php
                        for ($column = 'A'; $column <= $lastcol; $column++) {
                            echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
                        }
                        ?>
                    </select>
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
                </div>
            </div>

In dropdown i m getting these values

QC code 
Analyte 
Assay Value 
Assigned Value  
STANDARDDEVIATION   
ACCEPTABLEMIN   
ACCEPTABLEMAX   
Sample ID   
Date

Upvotes: 0

Views: 3149

Answers (4)

chadalavada harish
chadalavada harish

Reputation: 65

check now that values and texts are different and you can even select now by typing one

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
        $("#txtselect").keyup(function(){
        	$("#selbox > option").each(function() {
                if($(this).text()==$("#txtselect").val())
                {
                    $(this).attr('selected', 'selected');
                }
			});
        });
    
});
</script>
</head>
<body>

<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>


</body>
</html>

check this you will get solution run snippet and type "one"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
        $("#txtselect").keyup(function(){
        	$("#selbox").val($("#txtselect").val());
        });
    
});
</script>
</head>
<body>

<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>


</body>
</html>

Upvotes: 1

Ganesh Radhakrishnan
Ganesh Radhakrishnan

Reputation: 350

Try this 

<script type="text/javascript">
    function getselected(elem)
    {
        var textvalue = $(elem).val();
        if(textvalue != '')
        {
            $('select').removeAttr('disabled');
            $('select option').removeAttr('selected');
            $('select option').each(function(){
                if ($(this).html().indexOf(textvalue) > -1)
                {
                    $('select').val($(this).attr('value'));
                }
            });
        }
        else
        {
            $('select').val('');
            $('select').attr('disabled','disabled');
        }                
    }
</script>

<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
    <option value="">Select</option>
    <option value="1">QC code</option>
    <option value="2">Analyte</option>
    <option value="3">Assay Value</option> 
    <option value="4">Assigned Value</option>  
    <option value="5">STANDARDDEVIATION</option>  
    <option value="6">ACCEPTABLEMIN</option>   
    <option value="7">ACCEPTABLEMAX</option>   
    <option value="8">Sample ID</option>
    <option value="9">Date</option>
</select>

Upvotes: 0

sabari k
sabari k

Reputation: 132

Try this code, then you can modified with your need.

$("#product").on("change keyup paste", function(){ 
    var valuefound =''; 
    $("#platformid option").each(function(i){
      if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } }); 
   $('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })

Working fiddle here https://jsfiddle.net/8xfqeb9y/

Upvotes: 3

Krishna9960
Krishna9960

Reputation: 529

<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>


var listItems = ["One","Two","Three","Four","Five","Six"];

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i]);
  $("#listItems").append("<option>" + listItems[i] + "</option>")
}

$(".textVal").on("focusout",function(){
  for (var i = 0; i < listItems.length; i++) {
    console.log(listItems[i]);
    if(listItems[i] == $(this).val()) {
        $("#listItems").val($(this).val());
    }    
  }
})

Upvotes: 2

Related Questions