Flash - XML TutorialMaking a Search EngineIf you have followed up to here and are a bit more familiar with actionscript, then now you will see how we can make a searchable database with an input textfield, into which we enter words or fractions of words and after pushing a button the result will be listed. Here it is in live action: (Enter names like monica, heather, michael or others or languages. You can enter fractions of the words. See the XML file for more details).
Now we will look at the actionscript. The first part of the actionscript is similar to what we have already learnt. We create textfields and set html to true and attach the scrollbar to the main textfield. Then we have a function to preload the file and a button, which will initiate to load and parse the XML file. Now we define three variables foundItem, matchesArray and iDescription. The last two var are instances for arrays. You will see later where we need them. Then we have the function to load our XML file and the function to process the file: listItems(argument). This function is special because it is a recursive function. What that is we will discuss in a minute.
scroller.setScrollPosition(1);
mainField.html = true;
textField1.html = true;
textField2.html = true;
textField3.html = true;
function loadXML(xmlFile){
button1.onRelease = function(){
scroller.setScrollPosition(1);
showXml("xml_tutorial_3.xml");
foundItem = 1;
matchesArray = new Array();
iDescription = new Array();
}
}
loadXML("xml_tutorial_3.xml");
function showXml(xmlFile){
myXML = new XML();
myXML.load(xmlFile);
myXML.ignoreWhite = true;
myXML.onLoad = startItems;
startItems(success);
}
function startItems(success){
if(success){
listItems(this.firstChild);
} else {
mainField.htmlText = "No file loaded!";
}
}
Let´s now look at the function listItems.
function listItems(myItem01) {
for (var search01 in myItem01.attributes) {
if (search01 == "name") {
var idlist = myItem01.attributes.name;
In this first part of the function we loop through the XML file and search for attributes, particularly name attributes. All childNodes
for the models have a name attribute. That is crucial for the search engine. We then create the var idList, which will hold all the name
attributes.
var mySearch = searchWindow.text.toLowerCase();
subSearch1 = myItem01.attributes.name.toLowerCase();
sSearch1 = subSearch1.indexOf(mySearch);
subSearch2 = myItem01.attributes.language.toLowerCase();
sSearch2 = subSearch2.indexOf(mySearch);
The next part deals with the string search. We create the var mySearch, which is the input of the user in the
input textfield. Then we create more var for our attributes. We use indexOf(mySearch), which searches the input string and returns the
position of the first occurrence of the specified substring in the attribute values.
var itemDescription = myItem01.firstChild;
Now we create the var itemDescription for the result of our search. The text will be shown in the main field.
if(mySearch == ""){
foundItem = 2;
mainField.htmlText = "";
textField1.htmlText = "";
textField2.htmlText = "";
textField3.htmlText = " Enter a search word !";
}
Following are several if statements, which will determine the contents of the textfields and whether a search was successful or not.
If the user forgot to enter a searchword, then remind him/her. We make use of the var foundItem now, which we set to 2.
if (foundItem != 2){
if(sSearch1 != -1 && sSearch1 != undefined or sSearch2 != -1 && sSearch2 != undefined){
foundItem = 0;
matchesArray.push(myItem01);
mLength = matchesArray.length;
textField1.htmlText = mLength + " matches found !";
textField2.htmlText = "";
iDescription.push(itemDescription);
mainField.htmlText = iDescription;
If the user entered a searchword, then founditem is not 2 and the search will start. If the value of indexOf is not found, the method returns -1.
Therefore, if there is a match it is not -1 and the statement will be executed. We set foundItem to 0 and now make use of the arrays we created earlier.
Using the push method we fill the arrays with the found values. We use matchesArray.length to get the number of matches
found. iDescription will hold all the textNodes, which have been found. There is only one drawback as you might have
noticed. Since we are dealing with arrays, there is a comma between every description found. I have not yet solved this but there is a way out as
you will see.
} else if (foundItem == 1) {
mainField.htmlText = "";
textField1.htmlText = "Sorry, no match found !";
textField2.htmlText = " Search again !";
textField3.htmlText = "";
}
}
}
}
If foundItem is 1, which is the value at start, then there was no match found and that will be shown.
for (var count01 in myItem01.childNodes) {
if (myItem01.childNodes[count01].nodeType != 3){
listItems(myItem01.childNodes[count01]);
}
}
}
Now we come to the most important part of this script, which is called a recursive function. We loop through the childNodes and exclude
all textnodes (!= 3, nodes of type 3 are textNodes). We execute the same function listItems as above again but this time with a different
argument as above. It is similar to parsing a factorial number like 3!. 3! = 3 * 2! = 2 * 1 = 6 instead of 3! = 3 * 2 * 1 = 6. The recursive function cuts down on
script.
In the next section we will talk about preloading XML files. |