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 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    jquery xml file search

    I have a rather large auto parts website. Currently am using a javascript that searches through the ecommerce product tags to return make/model search results. It works ok but doesnt return the proper information when a part covers multiple years for one model and not the other.

    The solution Im thinking that will work the best is utilizing an xml file the will have product urls attached to the part numbers.

    Im looking to build some sort of widget that will search the data based on drop downs and return the products beneath.

    So I am looking for something with dropdowns like:
    category: (long desc from xml file)
    year:
    make:
    model:
    engine:

    With each one populating downward with the available products. Then, based on the search, return a list from the xml file of the appropriate parts.

    Shown below is a sample of the xml minus the urls on the part number.
    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <data-set xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    	<record>
    		 <PartNumber>62253</PartNumber>
    		<LongDesc>Plug-in O2 Harness Extension</LongDesc>
    		<Year>1998</Year>
    		 <Make>CHEVROLET</Make>
    		<Model>CAMARO Z28</Model>
    		 <Engine>5.7L (350ci) V8 16v Natural FI OHV Distributorless</Engine>
    		<Notes>Qty per Vehicle: 2; Universal LS1 O2 sensor Plug in Extensions</Notes>
    	</record>
     	<record>
    		 <PartNumber>62253</PartNumber>
     		<LongDesc>Plug-in O2 Harness Extension</LongDesc>
    		 <Year>1999</Year>
     		<Make>CHEVROLET</Make>
    		 <Model>CAMARO Z28</Model>
     		<Engine>5.7L (350ci) V8 16v Natural FI OHV Distributorless</Engine>
    		 <Notes>Qty per Vehicle: 2; Universal LS1 O2 sensor Plug in Extensions</Notes>
    	 </record>
    	 <record>
    		 <PartNumber>62253</PartNumber>
    		 <LongDesc>Plug-in O2 Harness Extension</LongDesc>
    		 <Year>2000</Year>
    		 <Make>CHEVROLET</Make>
     		<Model>CAMARO Z28</Model>
    		 <Engine>5.7L (350ci) V8 16v Natural FI OHV Distributorless</Engine>
     		<Notes>Qty per Vehicle: 2; Universal LS1 O2 sensor Plug in Extensions</Notes>
    	 </record>
    	 <record>
    		 <PartNumber>62253</PartNumber>
     		<LongDesc>Plug-in O2 Harness Extension</LongDesc>
    		 <Year>2001</Year>
     		<Make>CHEVROLET</Make>
    		 <Model>CAMARO Z28</Model>
     		<Engine>5.7L (350ci) V8 16v Natural FI OHV Distributorless</Engine>
    		<Notes>Qty per Vehicle: 2; Universal LS1 O2 sensor Plug in Extensions</Notes>
    	</record>
    	<record>
    		<PartNumber>62253</PartNumber>
    		<LongDesc>Plug-in O2 Harness Extension</LongDesc>
    		<Year>2002</Year>
    		<Make>CHEVROLET</Make>
    		<Model>CAMARO Z28</Model>
    		<Engine>5.7L (350ci) V8 16v Natural FI OHV Distributorless</Engine>
    		<Notes>Qty per Vehicle: 2; Universal LS1 O2 sensor Plug in Extensions</Notes>
    	</record>
    </data-set>
    I have found several different tutorials on the web, but nothing accomplishing what I need it to and actually working. I can handle the html with no issues, I just cannot get any of the coding I have found so far to work.

    I am not looking to display the contents of the entire xml file, just the proper results based on the search.

    Any assistance is much appreciated. I am sorry if I am posting this in the wrong area. Im new here.

  • #2
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I left out that I cannot use php

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    It's certainly possible to do what you are asking (and I would suggest that your post belongs in the main part of the forum, or possibly the AJAX branch, but it's unclear being that the final approach is not set yet).

    I have a couple of questions, though:

    - it sounds like your current search function works OK, it just needs to be tweaked to allow for multiple matches (or something - I don't really understand the problem there) - is that the only problem or is there some other reason for the big overhaul?
    - if you are (as it sounds) redesigning your data, is there some reason you chose xml over json?
    - what role do the product urls attached to the part numbers play in this? Or is that just something that will be displayed in the search results?

  • #4
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I am doing this because I need to make a refined search page that resellers can easily pull up on their screen at their service counter and do a quick search to get the appropriate part for their customers.

    Also currently, if I have a part that fits the 99-02 f150 and also the 01-02 f150 hd, when you do a search for 00 f150 hd, this part is returned even though it is wrong. Here is a link to the current script Untitled Document

    I chose xml because auto part manufacturers export all of their data for resellers in xml following a standard called aces and pies. the xml file I pasted up above is one we create in addition for our resellers and it is very easy to navigate. Ours has 15k different applications. I am also in the process of building a site that will sell auto parts for several manufacturers and will end up using this or a variation of it. So the data that I will be getting from them will be xml as well.

    The product urls are so the user can click and then go to the correct product page.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Makes sense. Well, except for the bit about the 99-02 f150 and the 01-02 f150 hd, but I'll take your word for that

    I guess your first step would be to make your five dropdowns (category, year, make, model, engine) work the same as the two you have now. Once you have that set up, searching the xml for products that match those selections and displaying them isn't such a big deal

  • Users who have thanked xelawho for this post:

    jagsweb (04-29-2014)

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    a sandbox example of using html dom to iterate xml nodes

    you would replace the hard-coded "my" criteria with values from your drop-downs, and you need a better way of showing the result, but this should get you going. let me know if you have any questions.


    the main part is the filter function that turns a list of all records into a list of matching records:
    Code:
    hits=Q("record", d).filter(function(a){
     return Q("Year", a)[0].textContent.trim() == myYear &&
              Q("Make", a)[0].textContent.trim() == myMake ; 
    });
    Q is a query function that looks for css selectors in dom structures and returns a true array of matches. it's 2nd argument is a root tag to look under. i use it to 1. find all main item branches, and 2. pluck "properties" from each item for comparison. you can do the same to pluck values out of the xml for display. i find it handier and more reliable than elm.childNode[1].data and all that DOM-0/1 malarkey...
    Last edited by rnd me; 04-29-2014 at 06:01 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    jagsweb (04-29-2014)

  • #7
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ok so here is part of where I am confused. I realize with the way my current search is set up that I needed to name all of the makes, models and submodels in my code. Do I need to do this to do an xml file seach as well?

    I coded up the the dropdowns...
    <div id="featuremodule2">
    <h2>Begin your product search here:</h2>
    <select class="select" id="category">
    <option selected>Category</option>
    </select><p>
    <select class="select" id="year" >
    <option selected>Year</option>
    </select><p>
    <select class="select" id="make">
    <option selected>Make</option>
    </select><p>
    <select class="select" id="model">
    <option selected>Model</option>
    </select><p>
    <select class="select" id="engine">
    <option selected>Engine</option>
    </select>
    <form action="search.aspx" name="tripleplay" target="_parent">
    <input type="hidden" name="find" id="find" />
    <input name="Submit" type="submit"
    onClick="setupForm()" value="Go">

    </form></div>

    Do I need to add all of the categories, years, makes, models, and engine sizes to the script of can i set that up to just read straight from the xml?

    I am confused here and tying the xml file to the dropdowns is causing me all kinds of headaches.

    thanks for all of your assistance

  • #8
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I am lost on the stuff below rnd me

    Quote Originally Posted by rnd me View Post
    a sandbox example of using html dom to iterate xml nodes

    you would replace the hard-coded "my" criteria with values from your drop-downs, and you need a better way of showing the result, but this should get you going. let me know if you have any questions.


    the main part is the filter function that turns a list of all records into a list of matching records:
    Code:
    hits=Q("record", d).filter(function(a){
     return Q("Year", a)[0].textContent.trim() == myYear &&
              Q("Make", a)[0].textContent.trim() == myMake ; 
    });
    Q is a query function that looks for css selectors in dom structures and returns a true array of matches. it's 2nd argument is a root tag to look under. i use it to 1. find all main item branches, and 2. pluck "properties" from each item for comparison. you can do the same to pluck values out of the xml for display. i find it handier and more reliable than elm.childNode[1].data and all that DOM-0/1 malarkey...

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    how large is the xml file?

  • #10
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    For this specific search the file is 5mb

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think that a file that size will end up being quite unweildly for javascript - you may find that server side filtering would suit you better

  • #12
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    So if not javascript, what would you suggest? I'd love to use php, but I cannot. This is going on an aspx ecommerce site.

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    5mb is not too much for JS, depending on how it's used. if the 5mb is a one-time cost on a page that is then used for hours without refreshing, it's fine. if it must be loaded often, like every time anyone changes anything, it will be less-than-ideal. most servers will use gzip to transfer the xml data, so you only actually transfer a small percentage of the actual file weight to the client. since xml is so repetitive, gzip does a really good job. in short, you can probably load that 5mb of data in a few seconds. if that's a few seconds in the morning, no biggie. if it's a few seconds every 20 seconds of use, then use a server-side search engine. there are plenty of .net xml code samples out there, and you can even use "javascript" ala jscript asp classic or .net's jscript.net.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

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