1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Adding Autocomplete to HTML Code

Discussion in 'Web Design & Development' started by snuffleufflegus, Feb 16, 2020.

Advertisement
  1. snuffleufflegus

    snuffleufflegus Thread Starter

    Joined:
    Apr 1, 2017
    Messages:
    466
    First Name:
    Damienne
    Is it possible to add "Autocomplete" to my html code?
    This is my browser bookmarks start page.Everything works great,however what i can't figure out
    is how to implement "Autocomplete" into it.
    When i click on the search box,i do get the drop down history search.I just cant seem to add autocomplete.
    Below is the code.The rest is just my bookmarks so it is irrelevant to post it.
    Any help would be greatly appreciated.Ty

    P.S...I can't remember if i asked about this issue before here at tech guy.If i did,i apologize.Obviously if i did,i still never fixed the issue.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.: Alpha Omega :.</title>
    <style type="text/css">
    <!--
    body,td,th {
    font-family:Vandiana platin;
    font-size: 12px;
    color: #ffffff;
    }
    body {
    width:200px;
    height:150px;
    margin:50px auto;
    margin-right:1080px;
    background:url(img/pic_bg.jpg) no-repeat;
    background-color: #000000;
    }
    a:link {
    color: #ffffff;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #ffffff;
    }
    a:hover {
    text-decoration: none;
    color: #ffffff;
    }
    a:active {
    text-decoration: none;
    color: #ffffff;
    }
    #head {
    margin-top:290px;
    margin-left: 303px;
    width:593px;
    height:98px;
    background:url(img/search_bg.png) no-repeat;
    }
    #home {
    width:200px;
    height:-114x;
    margin:38px auto;
    padding-top:0px;
    padding-bottom:0px;
    }
    #date {
    width:200px;
    height:80px;
    margin:0px auto;
    padding-top:12px;
    text-align:center;
    font-Vandiana platin;
    text-transform:uppercase;
    font-size:26px;
    color: #ffffff;
    }
    #month {
    font-size:20px;
    color: #ffffff;
    text-align:center;
    text-transform:uppercase;
    }
    #navs {
    width:900px;
    margin:-125px
    margin-right:378px;
    margin-top:-507px;
    margin-left:-64px;
    }
    #navcontainer
    {
    width: 150px;
    padding:35px;
    margin:0px auto;
    color: #333;

    }

    #navcontainer ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #navcontainer li
    {
    margin-bottom:8px;
    }

    #navcontainer li a
    {
    display: block;
    padding: 5px 7px 5px 0.5em;
    background-color: #ffffff;
    background-image: url(img/block.png);
    color: #ffffff;
    text-decoration: none;
    text-align:center;
    text-transform:uppercase;
    width: 100%;
    height: 100%;
    }

    html>body #navcontainer li a { width: auto; }

    #navcontainer li a:hover
    {
    background-color: #ffffff;
    color: #6fd116;
    }
    .search {
    padding-left:160px;
    padding-top:17px;
    margin-left:7px;
    width:290px;
    height:20px;
    }
    .bar {
    color:ffffff;
    width:290px;
    height:20px;
    background:#ffffff;
    border:0px;
    }

    input:focus {
    outline-color: #ffffff !important;
    }
    }
    -->
    </style></head>

    <body>
    <div id="head">
    <div class="search">
    <form method="get" action="https://www.google.com/search"><input class="bar" name="q" type="text" maxlength="255" value="" title="Google">
    </form>
    </div>
    </div>
    <div id="home"><img src="img/home.png" width="198" height="198" /></div>
    <div id="navs">
    <table width="480" border="0" cellspacing="0" cellpadding="0">
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,301
    First Name:
    Colin
    It is not just as simple as adding autocomplete to your input statement. You need the javascript to go with it. There is a tutorial here that is worth a look.
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,393
    First Name:
    Jim
    In addition you would add autocomplete="on" to your form statement - link
    This works without javascript and appears to force your browser's autocomplete to operate on a specific website form.
     
  4. snuffleufflegus

    snuffleufflegus Thread Starter

    Joined:
    Apr 1, 2017
    Messages:
    466
    First Name:
    Damienne
    Thankyou both for your input.Much appreciated.
     
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,393
    First Name:
    Jim
    Colin's javascript alternative is best used when you want to enforce your own prompts ...
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1240324

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice