Question

I downloaded a livesearch JavaScript plugin for my site, it’s working, but I need help to modify it a little bit.

Here is the code:

    $.ajax({url: $('base').attr('href') + 'index.php?route=product/search/ajax&keyword=' + keywords, dataType: 'json', type: 'GET', success: function(result) {
    if( result.length > 0 ) {
        var eList = document.createElement( 'ul' );
        eList.id = 'livesearch_search_results';
        var eListElem;
        var eLink;
        var eHref;
        for( var i in result ) {
            eListElem = document.createElement( 'li' );
            eLink = document.createElement( 'a' );
            if( result[i].img != null ) {
                var eImg = document.createElement( 'span' );
                eImg.className = "img_container";
                var img = new Image();
                img.src = result[i].img;
                eImg.appendChild( img );
            }
            else {
                eImg = document.createElement( 'span' );
                eImg.innerHTML = ' ';
            }
            eDiv = document.createElement( 'div' );
            eLink.appendChild( document.createTextNode(result[i].name) );
            if( typeof(result[i].href) != 'undefined' ) {
                eHref = result[i].href;
            }
            else {
                eHref = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
            }
            eLink.href = eHref;
            eDiv.appendChild( eLink );
            eDiv.innerHTML = eDiv.innerHTML + result[i].desc;
            eListElem.appendChild( eImg );
            eListElem.appendChild( eDiv );
            eListElem.appendChild( document.createElement('br') );
            eListElem.setAttribute( 'rel', eHref );
            $(eListElem).bind('click', function(){
                var gto = $(this).attr( 'rel' );
                try {
                    if( gto != false && gto.length > 0 ) {
                        document.location = gto;
                    }
                }
                catch( e ) {}
            });
            eList.appendChild( eListElem );
        }
        if( $('#livesearch_search_results').length > 0 ) {
            $('#livesearch_search_results').remove();
        }
        $('#search_menu').append(eList);
    }
}});

The output is something like this (without <ul>):

  <li rel="http://url">
  <span class="img_container">
    <img src="http://url.jp">
  </span>
  <div>
    <a href="http://url">MONS 1.0 (CTM 2013)</a>
    Description...</div>
  <br>
  </li>

Is there any way to modify output to this:

  <li rel="http://url">
  <a href="http://url">           <---- <a> tag here
  <span class="img_container">
    <img src="http://url.jp">
  </span>
  <span class="product-container">    <------ <span> tag here
    <span class="title">MONS 1.0 (CTM 2013)</span> <------ <span> tag here, remove <a> tag
    <span class="description">Description...</span> <------ <span> tag here
  </div>
  </a>
  </li>

This is beyond my JS knowledge.

Thank you very much

Answer 1

On the severe disclaimer that this is untested, I’d say yes!

The code is neatly divided up, makes it easy to read, let’s keep in that spirit.

Towards the top we see the following:

var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;

These variables are declared but not defined. They will be used over and over again to build each <li>. We’re moving the link (eLink) so we can leave that, but we’re also changing a <div> to a <span>, as well as adding several other elements; namely product container, title, and description. Let’s pop in some variables for those, while we’re here (the original author appears to have not defined eDiv up here, we’ll be replacing that with ePCont, anyway):

var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;
var ePCont, eTitle, eDesc;

The next step is two-fold.

First we see a bunch of document.createElements (some in if-statements, some not). document.createElement makes a new DOM element of the specified type. It does not add the element to the document, it only builds an instance of it, so it doesn’t matter what order they’re created in. This brings us to part two: [element].appendChild([element]) places one element in the tree under another. If an element in that tree belongs to the document, it will be displayed. This means first we’ll create a series of objects, then add them to each other, and finally add the topmost element to the document.

We’re going to drastically rewrite large parts of this code, but the first part (up through where the images are created) is just fine:

        eListElem = document.createElement( 'li' );
        eLink = document.createElement( 'a' );
        if( result[i].img != null ) {
            var eImg = document.createElement( 'span' );
            eImg.className = "img_container";
            var img = new Image();
            img.src = result[i].img;
            eImg.appendChild( img );
        }
        else {
            eImg = document.createElement( 'span' );
            eImg.innerHTML = ' ';
        }

The next line defines the container div that we now call ePCont, let’s rewrite it appropriately (and give it a class):

ePCont = document.createElement( 'span' );
ePCont.className = "product-container";

The line after THAT puts some text in the link. We’re putting an element in it instead, so we can safely remove it, but the if statement after that (which makes sure we’re going to be using a kosher url) stays:

        if( typeof(result[i].href) != 'undefined' ) {
            eHref = result[i].href;
        }
        else {
            eHref = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
        }
        eLink.href = eHref;

Finally, let’s create our two new spans:

eTitle = document.createElement( 'span' );
eDesc = document.createElement( 'span' );

and populate them:

eTitle.appendChild( document.createTextNode(result[i].name) );
eDesc.appendChild( document.createTextNode(result[i].desc) );

and set their classes:

ePCont.className = "title";
ePCont.className = "description";

Now it’s time to append everything to everything else. We’ll start from the lowest elements, and work our way upwards.

ePCont.appendChild(eTitle);
ePCont.appendChild(eDesc);
eLink.appendChild(eImg);
eLink.appendChild(ePCont);
eListElem.appendChild(eLink);

The rest of the document should flow more or less as it did:

    eListElem.setAttribute( 'rel', eHref );
    $(eListElem).bind('click', function(){
        var gto = $(this).attr( 'rel' );
        try {
            if( gto != false && gto.length > 0 ) {
                document.location = gto;
            }
        }
        catch( e ) {}
    });
    eList.appendChild( eListElem );

    ...

Again, totally untested, but I hope my description will give you enough knowledge of the workings of this plug-in to trouble shoot it!