Autocomplete search issue with Chrome in Bootstrap 3 - google-chrome

I have working search field which brings data from database, it has autocomplete as well. It is working fine in firefox but there is an issue in chrome.
When i start typing in firefox example: John Anthony Doe, i can write Doe and it will bring up John Anthony Doe or any data with Doe in it but in Chrome it is only bringing data if i start with with first letters i.e John.
Any idea how can I fix it? Is there a setting in chrome which i have to do?
Appreciate the help.

I created a simple form and ran it in both, chrome and firefox.
<form method="post" action="#">
<input type="text" name="testText" />
<input type="submit" />
</form>
And the result was same as you mentioned.
So basically, displaying the auto-complete is browser based and there is no such setting to change the way it searches from the previous inputs. Firefox searches wildcards like %text% while chrome like text%. That's a built in feature.
For IE :
The Internet Explorer AutoComplete feature can be enabled and disabled by following the steps below.
Open Microsoft Internet Explorer.
Click Tools and then Internet Options.
In the Internet Options window click the Content tab.
Click the AutoComplete button.
Check form.
But again, IE also behaves like chrome for your case
To solve this manually, you can create your own auto-complete :
By fetching data from db using AJAX as the user types the text, search the text however you want in db (%text% or text%).
Then populate the datalist for that text box with the fetched values.

Related

How do I stop "Type '/' from your saved info" (on Edge) from appearing on my site's search field?

I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input field. How can I disable this menu from appearing on just this input field of my site?
Based on the image you provided, I think this should be caused by some default settings in Edge. If you want to turn off this prompt, just navigate to: edge://settings/personalinfo in Edge and disable this feature like this image below:
I had today the same problem. I had input field without label and empty placeholder. Setting placeholder"..." and making the placeholder transparent makes that edge does not anymore offer "type / ..."
Hth
I believe what you're looking for is:
spellcheck="false" autocomplete="off" aria-autocomplete="none"
The aria-autocomplete seems to prevent that box from popping up and the spellcheck seems to also stop the spell checker one from displaying.
There are places where autocomplete and spellcheck would come in handy, but NOT in single-line fields like email, website, or an <input> where I have my own Bootstrap dropdown-menu/dropdown-item list that displays retrieved DB records via AJAX as the user types (in this case, the Edge popups were ovelaying my DropDown list).
Anyway, adding this code to the <input class="whatever" id="whatever" spellcheck="false" autocomplete="off" aria-autocomplete="none" placeholder="whatever" value="whatever" > seems to solve the issue and you don't have to get all your users to change the browser attributes or mess with the placeholder. Hope this helps... :)

Chrome is autofilling my select2 input with its placeholder

I'm currently experiencing a very annoying problem with Google Chrome. I have some filters that are a multi-select and when I click to type on those filters, chrome suggests as an autofill option the placeholder for that select. I've never typed that text on this field, Chrome is getting that from the placeholder of the input.
Also, it seems that Google saved that placeholder as a "suggestion" to fill data on forms.
I've already tried to set those fields as autocomplete="off" and autocomplete="new-password and it did not work.
If I disable Chrome Option to autofill addresses, phone numbers and etc, this problem goes away.
I would like to be able to suppress chrome from suggesting this since it does not make any sense and makes using the filter a pain. I'm not sure if this is a chrome bug, a bug with select2, a combination of both. I've been looking everywhere on the internet to a solution and could not find one, does anybody know how to solve this?
To turn off the auto suggestions which are displayed in chrome try adding
<input autocomplete="off">
Even after adding this if chrome tries to give you auto suggestion, the most widely used technique is to add an hidden input field above your field to solve this problem
<input style="display:none" type="password" name="pass"/>
Adding this above input must solve the problem
Try to add another select2 with display="none", visibility="hidden" and autocomplete="off" before that one and see if the problem goes away.
Had this issue with a password input a while ago and that did the trick.

Issue with website form input field on IOS devices

I'm looking for another set of eyes to take a look at the html and css of this page https://www.smartcrowd.ae/e-book/ on their iphone.
For some reason on Iphones only the form will not allow the user to tap into the phone number field. No matter where you tap in the input field, it will not allow you to type anything.
On safari, on desktop, it works but only if you enter the country code first.
It's working fine on google chrome, and firefox and I just can't find what the issue is.
The form is using a third-party plugin which generates the country code field, which seems to be a problem. If I deactivate the plugin the phone number input field works fine.
I've been racking my brain for the last day trying to figure this out.

In Internet Explorer I can't write to an input element after click on it - weird bug

I have a very very weird bug. In Google Chrome everything is OK, only IE has this problem.
I use an AngularJS and ui-select component to create a multiple selects.
In IE, when I click into text input element, I can't type anything and even placeholder is not removed.
But when I click to URL address bar or click somewhere into DOM in Developer Tools (after hitting F12) first and then I click into that input, it normally works and I can write into input to filter options.
I tried a lot of with focus/blur, but nothing helps me. Please, did someone have similar problem?
Code:
Turns to:

Firefox 26 showing credentials in suggestion for form fields

I'm using firefox 26. I have saved my credentials to my development site. And then i have used auto complete off feature. Following is my sample code
<form id="loginform" autocomplete="off">
<input name="username" type="text" autocomplete="off">
<input name="pwd" type="password" autocomplete="off">
</form>
Its worked fine for previous versions. After update to firefox 26, its not working. when i type first letter of my username, its showing saved credentials in suggestion. How to disable this?
Even i selected the suggested credentials, its auto fill the username and password field. But its not allowing to access site, showing login errors like enter password.
From: http://support.mozilla.org/en-US/kb/control-firefox-automatically-fills-in-forms#w_prevent-firefox-from-storing-form-entries
If you don't want Firefox to remember what you've entered into form fields, you can turn off the auto form fill feature:
On the menu bar, click on the Firefox menu and select Preferences...
.
Select the Privacy panel.
Set Firefox will: to Use custom settings for history.
Remove the check mark from the box that says Remember search and form history.
Close the Preferences window .
Disabling form history also prevents Firefox from storing search history for the Search bar in the Navigation Toolbar.
Clearing form history
If you want Firefox to forget all of your previous form entries:
On the menu bar, click on the History menu, and select Clear Recent History….
In the Time Range to clear: drop-down, select Everything.
Click the arrow next to Details to display the list of items that can be cleared.
Make sure only Form & Search History is check marked.
Click Clear Now. The dialog box will disappear and your form history will be erased.
Prevent Firefox from storing form entries
In some browsers you may need to activate an autocomplete function for this to work, or deactivate by unchecking its relative checkbox. (Look under "Preferences" in the browser's menu. This feature is in the control of user. At least in the current time.