iWeb - text box auto-fill?

[plaidhippo]

Hi all,
I'm looking to make a fun page using iweb which would appear similar to google. As the user types the search term into the text box, I would like it to auto-complete their term using appropriate terms from a preprogrammed list (either in the code directly or in a separate file is fine). I don't have any programming preference or experience so the easiest way to do this through iweb would be great! Also, it doesn't have to actually be published online, I don't mind if it is just a folder of HTML files on my desktop that i open up with safari.

Any advice would be much appreciated!

Thanks,
Ashish

 

[angelwatt]

It would have to be implemented in JavaScript as iWeb doesn't doesn't really support much else on its own, and also would be required if running locally without a web server.

Do you know JavaScript? What kind of help are you seeking? Do you expect someone to do it for you?

 

[plaidhippo]

Hi,
Thanks for moving the thread, I am sorry it was in the wrong spot initially.

I don't expect anyone to do it for me, I just thought since it seemed to be commonly used around the web, it may be something that is readily written and available through a tutorial or something. I googled around for it but couldn't find how to make it work completely, so I thought I would ask here.

Would I need a web server to make this work correctly (ie not local to my hard drive)? I do own a web site from globat.com and could use that if necessary.

I found the following code through yahoo, not sure what I am missing, so if someone can help me...

<button type="button">PSearch</button>

<p>

<!-- Start of button code -->

<form action="psearch_results.html" method="get">

<p>

<input type="text" name="firstname" />
<input type="submit" name="B1" " id="B1" value="Psearch" />

</p>

</form>

<!-- end of button code -->
</center>

<hr noshade>
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>

<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>

<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
YAHOO.example.BasicLocal = function() {

// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
// Optional to define fields for single-dimensional array
oDS.responseSchema = {fields : ["state"]};

// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
oAC.useShadow = true;

return {
oDS: oDS,
oAC: oAC
};

}();
</script>


The file data.js contains the following text:
YAHOO.example.Data = {

arrayStates: [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida"
]
};

 

[angelwatt]

Some notes

• When posting code, be sure to use to appropriate markup using the toolbar. For your post, the HTML button (with the <> on it) would mark it up so it would show more readable.
• Small note, the center tag is deprecated so it would be best not to use it.
• The <hr noshade> can be gotten rid of. I believe it's deprecated and using attributes like that is bad form (I realize this is Yahoo code).
• The style tag can only be inside the head tag no matter how much you see Yahoo doing it.
• I believe you're missing a JavaScript include to Yahoo that allows your script to know what YAHOO is.
• Are you getting any specific errors? Be sure to open the Error Console (under the tools menu) to check for any errors.

 

[plaidhippo]

Thanks again!
I think you are correct in that the problem is that the code has multiple references for yahoo objects and scripts which I have no access to... man, I was hoping a tutorial existed on how to do this in a simple way! I tried googling for autofill and text form in various combinations, maybe I'm not using the right search terms to find out how to do this? Any more advice is greatly appreciated!

Ashish

 

[angelwatt]

You just need to call on the extra Yahoo component. From the page where you got the Yahoo script there's a link at the very bottom for the configuration dependency. It'll show you the script and CSS tags to include to allow the autocomplete to work.