how to search in combobox by database

Question

protected void Page_Load(object sender, EventArgs e)
{
    dr = new MySqlDataAdapter("select * from cus_mas_det", conn);
    ds = new DataSet();

    dr.Fill(ds, "cus_mas_det");
    DataTable CodeDesc = new DataTable();
    conn.Open();
    dr = new MySqlDataAdapter("select tvl_code, concat_ws(',', tvl_code, citi_name) citiname from code_desc where travel_mode = 'BUS'", conn);
    ds1 = new DataSet();
    dr.Fill(ds1);
    ddlfrom.DataSource = ds1;
    ddlfrom.DataTextField = "citiname";
    ddlfrom.DataValueField = "tvl_code";
    ddlfrom.DataBind();
    txtbookingdate.Text = System.DateTime.Now.ToString("yyyy/MM/dd");
    txtbookingdate.ReadOnly = true;
    txtbookingref.Text = autoid();
    txtbookingref.ReadOnly = true;
}

I have a asp page in which I have textboxes and comboboxes, I am populating the combobox from the database, as given in the above code, and I am able to populate that.
Now my problem is I want to search the elemnets by typing any words in the combobox..
For example, if I type word "Ab" it should show all the elements starting with "Ab"..
How to do that?

   <asp:ComboBox ID="ddlfrom" class="chzn-select" runat="server"  
                                            DataTextField="name" DataValueField="name" MaxLength="0" 
                                            style="display: inline;" 
                                            onselectedindexchanged="ddlfrom_SelectedIndexChanged1">

                                        </asp:ComboBox>

Ben · Answer 1 · 2013-11-12T10:04:58.860

0

You need to do this client side using AJAX.

Create a web service or use a page method which takes as a parameter some search text and then returns the data you need.
Client side - handle the keypress event using JavaScript/jQuery and update your combo box or whatever control you are using at that point.

Example using jQuery:

$('#<%= txtBox.ClientID %>').keypress(function () {

    var currentText = $(this).val();

    $.get('some_web_service', { searchText: currentText }, function (data) {
        // update combo box here using data
    });

});

This assumes you have a web service called some_web_service which will return the data you need.

Alternatively you could put the whole thing in an UpdatePanel and handle the keypress event but the performance of this will not be as good.

edited Nov 12 '13 at 10:04

answered Nov 12 '13 at 09:58

Ben

1,913
15
16

u mean i have to add a new jscript file for tht..?? – Naveen31 Nov 12 '13 at 10:04
In a seperate javascript file or you could put the javascript within tags in the page – Ben Nov 12 '13 at 10:05
why do i need web service for that..?..can u please explain..? – Naveen31 Nov 12 '13 at 10:11
If I understand you correctly you want to have a list of values update when a user starts typing in a textbox. This is an event that needs to be handled client side, so you use JavaScript to do so. However, the list of values you have needs to change, and they need to come from the server. The only way to do this is to use your script to go back to the server to get the values, so you need a Web Service or PageMethod for the script to go to. – Ben Nov 12 '13 at 10:19
okk i have done it so far...now what all i have to do in the page method..?? – Naveen31 Nov 12 '13 at 10:45
Read this: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ – Ben Nov 12 '13 at 10:50

score 0 · Answer 2 · answered Nov 12 '13 at 10:01

0

I don't think you can do such seraching with ASP.Net combo boxes rather you should try some thing like

answered Nov 12 '13 at 10:01

Pawan

1,065
5
10

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

You can use chosen jquery plugin from here harvesthq.github.io/chosen/

So you can search keyword within drop-down list try this plugin.

This may help you to use How do I use Chosen jQuery in my html file?

Add required js and css files to page assign class to dropdown like this:-

    <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
    <link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script type="text/javascript">
$(function(){
    $(".chzn-select").chosen();
});
</script>
    </head>
    <body>

Assign class to your dropdown

<asp:DropDownList ID="dr_list" runat="server" CssClass="chzn-select">
   <asp:ListItem Value="-1" Text=""></asp:ListItem>
      </asp:DropDownList>

Download Here

edited May 23 '17 at 12:12

Community

1
1

answered Nov 12 '13 at 10:11

sp_m

2,647
8
38
62

exactly that is what i need..can u please tell me how and where should i add that plugin..?? – Naveen31 Nov 12 '13 at 10:14
you dont need to change chosen.js file.just update question with modified code.Did you assign class to your dropdown? – sp_m Nov 12 '13 at 10:48
i am doing same thing...still not coming..:( – Naveen31 Nov 12 '13 at 11:11
no any error is showing...i am just getting all the values from database in my dropdownlist like i was getting previously...no change... – Naveen31 Nov 12 '13 at 11:18
try using dropdown list see if it's working instead of combobox – sp_m Nov 12 '13 at 11:19
can u tell me that where i have to add your part1 code (i.e link rel=....)....exactly..may be i am going wrong in that... – Naveen31 Nov 12 '13 at 11:22
Within your page section this js and css file can be linked – sp_m Nov 12 '13 at 11:24
in the asp page in which i have that particular combobox..? – Naveen31 Nov 12 '13 at 11:26
yes,why are u using combobox which version asp.net u are using? – sp_m Nov 12 '13 at 11:29
4.0...well i am working on a functionality something very similar to makemytrip...so i needed one combobox in which i can type the words to search the elements or else i can see the elements by dropdownlist...and i have to populate the combobox from database which i have done...now i just need that search functionality... – Naveen31 Nov 12 '13 at 11:32
use this $(".chzn-select").chosen({allow_single_deselect: true}); instead of $(".chzn-select").chosen(); – sp_m Nov 12 '13 at 11:37
i have edited that part.. well in the asp page i dont have that syntax....so where should i add the whole code.?..in the master page or in asp page only..?..and if in asp page..then where exactly..? – Naveen31 Nov 12 '13 at 11:41

how to search in combobox by database

3 Answers3