and thank you in advance. I am experiencing an issue with Google Chrome today. I have made the decision to implement a JS plugin called awesomplete, it is a autocomplete plugin. The plugin works wonderful in every browser except for Google Chrome. The plugin works, except Google Chrome is ignoring my autocomplete="off" pleas and throwing in its own suggestions which, of course, appear OVER the awesomplete's generated content.
Whenever I type into my input, Google Chrome automatically creates a menu below the input, exactly as if there was a datalist attached to the input (which there isn't). This false "datalist" appears over the awesomplete suggestions making the plugin useless. I have searched and searched without success. I have tried both autocomplete="false" and autocomplete="off" on the form, and on the input. I also have aria-autocomplete="off" on there even though I'm not sure what that does. I have even tried a suggestion from others to put to "fake" inputs at the beginning of the field, so that Google Chrome's autocomplete feature will attack them instead of the real input. Yeah, no go.
Most of my users are using Google Chrome, so this is a problem for me. Is there anything I can do? Or I'm I left helplessly powerless to the browser, who for some reason the devs decided to take form matters into their own hands.
<input required type="search" data-list="<?php echo $list; ?>" class="awesomplete" name="gameSearch" size="50" placeholder="Search for game titles here!" autocomplete="off" aria-autocomplete="list">
$list is a generated list of game titles courtesy of some php before the input.
Any advice or help is greatly appreciated...
I am pretty much sure chrome does it by matching the 'id'/'name'. At this point of time, I guess there is no solution other than removing them off your datalist.
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I have seen some similar questions to mine , but most of them have some code related issue that prevents them from work... In my vase the form submit works well in safari, chrome , firefox
But in the internet explorer version i click the submit button and it doesn't do anything.
Initially i thought it might be a networking problem , or maybe an html problem ? But it doesn't make sense to detect a click and not do the action.
What could possible be the problem ? since the difference between browsers is basically the way they read the html right ?
I'm interested in learning more about this issue !
Thanks in advance !!!
Fixed the problem by changing the <button> </button> tag to an <input type="submit">
maybe that's not a propper solution but it worked for me !!
Hope it helps someone!!
I'm having issues with Chrome auto-complete data overlaying on Jquery Datepicker and haven't had any luck with autocomplete='off' so wondered if anyone had any luck with a non script solution?
Thanks in advance.
The following question is similar : jquery ui-autocomplete and google chrome autocomplete
I worked around the problem by adding the autocomplete attribute for the input node
<input autocomplete="off"
It works for Chrome Version 107.0.5304.62
I have a very strange problem that I cannot solve.
There is something preventing a user from opening the file browse window when clicking the browse button in internet explorer. This input does not use javascript. I am unable to access the user's computer to see what is happening on their end.
They are using MSIE 9.0; Windows NT 6.0
<input name="picture" type="file" width="100px" class="stretch">
If anyone has any ideas why the input is not working I would greatly appreciate them.
Your Html looks good, i have tryed it. I think the only thing that breaks the functionality is your css-class "stretch". Please try it without that css class and/or post the style definition here.
I am attempting to modify one of my text input boxes in a form that I have. I would like suggestions to pop up as the user types. Basically, I would like to emulate the "Tags" box that is on the ask question pages here on Stack Overflow, but with different data as the suggestions obviously. How would I go about doing this?
For context, this is for a club at a college, and I am trying to allow members to type in their majors and as they type have a suggestions come up.
This snippet from Cena Mayo did just what I was looking for:
<input id="color" list="suggestions">
<datalist id="suggestions">
<option value="Black">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="White">
</datalist>
Documentation
jQuery has an autocomplete plugin that you could use.
It depends on what kind of language/platform/etc. you are using as well. I am a primarily .NET developer and I've used the following:
SQL Server for storing data
Web Forms or MVC for the web app
An ashx handler to retrieve and format the suggestions
jQuery plugin above to render the results returned from the ashx underneath an input box
Well if you want to get information from a database on commonly used or already created elements you'll need more than just html. If you just want the form to suggest things people have already input in their own browsing sessions the form will do that automatically.
What I can point you towards is this guys post. He outlines and gives the basic code to get you started on the path for auto suggestion in forms He even gives you the files to get you going, but you'll have to do some modification work.
Also included later in the post somebody adds this to go into the ajax_framework file.
`function clearsuggest() {
e = document.getElementById('results');
e.style.display="none";
}
`
In search.php:
onClick="fill();clearsuggest();return false;"
That section of code will clear the suggestions upon click of a suggestion. Hope this helps and good luck.