murday1983
murday1983

Reputation: 4006

Can't stop input from displaying auto-fill details in Chrome

I have an input on my website which whenever I click in it displays the following

enter image description here

I have the following HTML for the input

        <div id="searchFieldSectionDiv" class="form-group">
            <div class="btn-group" style="width: 100%">
                <label class="sr-only" for="searchField">Filter results</label>
                <div class="input-group">
                    <!-- TODO: Need to filter products section as the user types -->
                    <input id="searchField" class="form-control" placeholder="Type to search..." autocomplete="off">
                    <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <i class="fas fa-search" style="margin-right: 0px"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I have tried adding type="search but it still displays the address box.

Not to sure on how to hide it, all other browsers seem fine, just Chrome.

Ideally I want to add this at top level so I don't have to keep adding this to every input but again not too sure which level to add it too (body maybe?)

Upvotes: 1

Views: 77

Answers (1)

xmaster
xmaster

Reputation: 1050

You have to change autocomplete="off" to autocomplete="disabled"

Chrome stopped supporting autocomplete="off" that's why it isn't working but it doesn't understand if you use autocomplete="disabled" that's why this works for now

Upvotes: 1

Related Questions