/    Sign up×
Community /Pin to ProfileBookmark

When the option is selected

Copy linkTweet thisAlerts:
Jan 03.2021

Hello,
searching while typing text, no problem here
but does not search when selected
How do I need to edit in jquery code?

“`
<input type=”text” id=”search” list=”cityname”>
<datalist id=”cityname”>
<option value=”Boston”>
<option value=”Cambridge”>
</datalist>

$(‘#search’).bind(“keyup change”, function(){
………………..
)};
“`

Thank you

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJan 03.2021 — Both, keyup and change, are firing for me when I select an option. Must have a different reason when it doesn't work for you.

BTW: My editor complains about the HTML: <option> needs to be closed by </option>.
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — This is the exact code I use

<input type="text" autocomplete="off" id="search" list="search_options" placeholder="Enter Text / Double Click">
<datalist id="search_options">
<option value='"Misafir Bayi"'>Sadece Misafir Bayi Ara</option>
<option value='"Misafir"'>Sadece Misafir Ara</option>
<option value='"1"'>Sadece Yönetici Ara</option>
<option value='"2"'>Sadece Kayıtlı Bayi Ara</option>
</datalist>

$('#search').bind("keyup change", function(){
var query = $('#search').val();
var per = $('select[name=per_page] option').filter(':selected').val();
if(query != '""' && query != '"'){
load_data(1, per, rows, query);
}
});
It automatically searches when I enter text by hand. no problem

However, when I choose from the option, it does not search,

If I click on the blank space it is searching
Copy linkTweet thisAlerts:
@praveen425188Jan 15.2021 — You can use onfocus event handler on the input box to search when text is selected
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — Screen video display

I could not understand. Can you give a little more detail?

Copy linkTweet thisAlerts:
@SempervivumJan 15.2021 — @gecekule#1626808 Same situation as before: When I try your code it is working fine. The listener fires twice as two events are added. I tried Opera and Firefox. Which browser are you using?
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — I use Firefox browser and recorded the video in firefox browser

Chrome, working

![](https://ardeseni.com/arama.jpg)
Copy linkTweet thisAlerts:
@SempervivumJan 15.2021 — @gecekule#1626818 Seems to me that I was wrong when writing that it works for me in fireworks. It does not but when I change the event from "change" to "input" it does. Try to change the event as I did.
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — I am a beginner, can you give an example
Copy linkTweet thisAlerts:
@SempervivumJan 15.2021 — Change the first line in this code: $('#search').bind("keyup change", function () {
var query = $('#search').val();
var per = $('select[name=per_page] option').filter(':selected').val();
if (query != '""' &amp;&amp; query != '"') {
console.log('fired ' + query + ' ' + per);
// load_data(1, per, rows, query);
}
});

to this:

`$('#search').bind("keyup input", function () {`
Copy linkTweet thisAlerts:
@KeverJan 15.2021 — There is another problem with using datalist on text inputs. Browsers have different ways of showing them, when the option tags have both a value and a label. Firefox shows the label, Edge shows the value and Chrome shows both.

Note that when only a value or label attribute is present, the textnode inside the option element represents the one missing.
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — @Sempervivum#1626822 Thank you very much, it worked
Copy linkTweet thisAlerts:
@gecekuleauthorJan 15.2021 — > @Kever#1626823 There is another problem with using datalist on text inputs. Browsers have different ways of showing them, when the option tags have both a value and a label. Firefox shows the label, Edge shows the value and Chrome shows both.
>
> Note that when only a value or label attribute is present, the textnode inside the option element represents the one missing.


[Chrome screen](https://ardeseni.com/arama.jpg)

What's the better way to do something like this?
×

Success!

Help @gecekule spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...