2

自分のサイトにlivesearchJavaScriptプラグインをダウンロードしましたが、機能していますが、少し変更するためのサポートが必要です。

コードは次のとおりです。

    $.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);
    }
}});

出力は次のようになります（なし<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>

これに出力を変更する方法はありますか？

  <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>

これは私のJSの知識を超えています。

どうもありがとうございます

4

1 に答える 1

3

これはテストされていないという厳しい免責事項については、私はそう言うでしょう！

コードはきちんと分割されており、読みやすくなっています。その精神を維持しましょう。

上部に向かって、次のように表示されます。

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

これらの変数は宣言されていますが、定義されていません。それらは、それぞれを構築するために何度も使用されます<li>。リンク（eLink）を移動してそのままにしておくことができますが、a<div>をa<span>に変更し、他のいくつかの要素を追加しています。つまり、製品のコンテナ、タイトル、および説明です。ここにいる間に、それらの変数をいくつか入力してみましょう（元の作成者はここで定義されていないようですが、とにかくeDiv、これをに置き換えます）：ePCont

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

次のステップは2つあります。

最初に、たくさんのdocument.createElementsが表示されます（ifステートメントにあるものとそうでないものがあります）。 document.createElement指定されたタイプの新しいDOM要素を作成します。ドキュメントに要素を追加せず、インスタンスを作成するだけなので、作成順序は関係ありません。これにより、パート2に進みます [element].appendChild([element])。ツリー内の1つの要素を別の要素の下に配置します。そのツリーの要素がドキュメントに属している場合は、その要素が表示されます。つまり、最初に一連のオブジェクトを作成し、次にそれらを相互に追加し、最後に最上位の要素をドキュメントに追加します。

このコードの大部分を大幅に書き直しますが、最初の部分（画像が作成されるところまで）は問題ありません。

        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 = '&nbsp;';
        }

次の行は、現在呼び出すコンテナdivを定義していePContます。適切に書き直して（クラスを指定して）、次のようにします。

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

その後の行は、リンクにテキストを配置します。代わりに要素を入れているので、安全に削除できますが、その後のifステートメント（コーシャURLを使用することを確認します）は残ります：

        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;

最後に、2つの新しいスパンを作成しましょう。

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

そしてそれらを投入します：

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

クラスを設定します。

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

次に、すべてを他のすべてに追加します。最も低い要素から始めて、上に向かって進みます。

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

ドキュメントの残りの部分は、多かれ少なかれ流れているはずです。

    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 );

    ...

繰り返しになりますが、完全にテストされていませんが、私の説明がこのプラグインの動作について十分な知識を与えて、問題を解決できることを願っています！

于 2012-12-05T20:19:01.453 に答える