Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Combining Search Button

    Hi there,

    I am wondering how it is possible to combine two button fuctions. Currently I have a standard button that does what I want, as follows:

    <form action="http://www.websitehere.com/2013/01/word-" method="get"
    onsubmit="this.action+= document.getElementById('urlField').value.toLowerCase() + '.html'; return true;">
    <input style="width: 224px; height: 21px;" size="12" type="text" id="urlField"/>
    <input type="submit" value="Enter" style="background: #000000; height: 26px; color: #FFF; width: 59px; border: 2px outset buttonface;"/>
    </form>

    That is great, You type in a few letters and it inputs it into the generic URL and sends the user to the correct page. However, I would like to combine it with the geeneric code below (which I found oline) such that the same functionality remains, but also, once the user is typing the letters, it brings up a list of options from which they can also choose (if necessary). Is that possible?

    <!doctype html> <html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /></div>

    Cheers

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's very possible, yes.

    If you think of the autocomplete functionality as just providing an alternate way of populating the form field that you're currently using, then your existing form is not doing anything additional, it's just being populated in a different (additional) manner.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •