Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16857
    Hi! Hopefully I can explain this properly. I'm a 911 dispatcher in training and am trying to put together a quick web page that will allow me to pick a call for service type and then open a corresponding page in a lower frame that had the details of what I need to ask the caller.
    So far I've tried using the normal form <option> command to list out all the call types, but my problem is as I'm typing in the drop down to select the type I want, its only really looking at the first letter of the words in the options, whereas the software we use in the dispatch office looks at everything to select as we type.
    Because I have a lot of call types that start with the same letter I need to be able to narrow it down as I type in the field until it matches something.
    Here's an example; Let's say I have the following call types to choose from:
    AID
    AIRPLANE
    ANIMAL
    ARSON
    ASSAULT
    ASSIST
    If I wanted to select assist in the software at work I could type "assi" and by process of elimination it would end up being whats left in the field. However, with most web forms if I were to type "ASSI" it would bounce from AID to SEXOFFENDER to SUSPICIOUS to INFO because it only cares about the beginning of each word. Hope that clears up what I'm asking about, its the only way I can explain it
    My question is: Does anyone know of a way to have a drop down list that can switch through options as you type a series of characters rather than only paying attention to the first letter of each option?
    Thanks!
    -Mike

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Mike ...

    I have an AJAX (PHP/Javascripting) method that might work.
    How proficient are you are PHP?


  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Mike there is a way you can achieve this.

    Perhaps having a version of code that requires a certain browser is bad design, (infact it is bad design) but this is fit for purpose.

    If you use Firefox you can enable it to search for text as you type it. This means that if you have all your call types as links and you type them, the correct link will have focus and by pressing Enter or Return that particular call type can be determined.

    Take my below example. Its functions are

    1) When you click on a particular link (Assist, Bank Robbery and Burglar) the text is then put into the div mainContent. If you were to change the link text of a link/links you would not have to change the function as the link text is the variable going into the javascript function.

    2) If you click [clear] the mainContent div will wipe out the text inside it. I set it to null, however IE7 (maybe earlier versions too) display the text null whereas Firefox just clears the div completely. This is easily fixed (set the div to "").

    Heres the code.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<title>Using the Find feature of a browser</title>
    	
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    
    	<script type="text/javascript">
    
    	requiredService = function(srv)
    	{
    		if(srv == "CLEAR")
    		{
    			document.getElementById( 'mainContent' ).innerHTML = null;
    		}
    		else
    		{
    			document.getElementById( 'mainContent' ).innerHTML += "<p>You clicked: " + srv + "</p>";
    		}
    	}
    
    	</script>
    
    </head>
    
    <body>
    
    	<div id="leftContent">
    		<a href="javascript:void(0);" onclick="requiredService( this.innerHTML );">Assist</a>
    		<a href="javascript:void(0);" onclick="requiredService( this.innerHTML );">Bank Robbery</a>
    		<a href="javascript:void(0);" onclick="requiredService( this.innerHTML );">Burglar</a>
    		<a href="javascript:void(0);" onclick="requiredService( 'CLEAR' );">[clear]</a>
    	</div>
    
    	<div id="mainContent"></div>
    
    </body>
    </html>
    If you require any information about this just ask.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    bfsog ...

    I was thinking of the same thing ... a browser approach (not a coding approach).

    Mainly though, I want to find a coding solution (for selfish reasons), because I
    always wanted to know how to do it. I think AJAX is the key and I'm experimenting
    with a couple methods I found online.

    I'll let you know what I figure out ... it's not as easy as they make it appear.


  6. #5
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Yeah I would be interested to know how you do it, as (from my own limited knowledge of how browsers work) getting them to append your keyed keys seems tricky. Good luck.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Here's where I began ... I'm looking at some of these:
    http://www.javascript-examples.com/autocomplete-demo/


    EDIT:

    I learned some new things ...

    Using Script.aculo.us,

    There are two methods, External and Internal

    I like where it finds the letters "within" any words,
    not just starting at the beginning.

    A lot of options and confusing configurations.

    Internal is best for "local" client lists, more Javascripting.
    External is more for SQL (database stuff).

    I haven't found the script I like best yet .... will keep you posted.


  8. #7
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16857
    I really have no html or php skills whatsoever other than viewing the source of a page and editing it to match what I'm looking for
    Hats off to those of you who have mastered the art form of web design, I'm much better off talking to suicidal callers rather than figuring this stuff out and staying on top of it.
    I'll be following along in the thread though, keep the ideas flowing

  9. #8
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    While mlseim works on a solution you should give the file I uploaded a try.

    Remember though you need to use Firefox and enable the find as you type feature (Tools - Options - Advanced - General Tab).

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I have a question about displaying information.

    When you click on your "find" in the textbox, how does
    it display info in your frame. From a datafile, a database, a webpage?

    How are you doing it now?


  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    OK ...

    I got it now ... the easiest way I could find, and it's pretty neat!

    It uses a couple of files from "script.aculo.us" they are free.
    You need to go there and download them, or download here.

    prototype.js
    scriptaculous.js

    note: I put mine in a subdirectory called "lib" ... use your own path if you want,
    but make sure your script defines the correct path to the Javascript files.

    This is my test page ...

    http://www.catpin.com/autocomplete/

    Enter words like:
    broke
    br

    View the HTML to see how easy it is.

    I like using "autocomplete.local" because the array setup is easy and
    it has the fullSearch:true parameter, so you can search for parts
    within a word, not just the beginning of the word.

    Once a word is selected and you get it into the box,
    click enter again and it will come in as a variable to be used
    for determining which text to display on the bottom.

    My example has no other text to display ... not sure how you are
    doing that now ... from a textfile, or database?

    Have fun!



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com