адаптировано Быстрый ajax поиск

Sprinx

Sprinx

Пользователь
Там адаптировать проще некуда. Если люди не могут адаптировать html или css, то зачем они ставили движек?
Наверное чтоб постоянно просить помощи.:confused:
 
Wertos

Wertos

Пользователь
Ну у меня сама форма выполнена так
HTML: 
        <div class="wrap-search-form" id="wrap-search-form">
            <form action="tracker.php" id="search-form" class="search-form" />
                <div id="val-search" style="float: left;">
                    <a class="checked bold" name="tracker.php" onclick="_form_build(this);" href="javascript:void(0);">по раздачам</a>
                    <a class="unchecked" name="search.php" onclick="_form_build(this);" href="javascript:void(0);">все темы</a>
                    <a class="unchecked" id="search-hash" name="tracker.php" onclick="_form_build(this);" href="javascript:void(0);">по info_hash</a>
                </div>
                <input name="nm" type="search" id="search" class="search" placeholder="введите запрос..." />
                <input type="button" id="submit-btn" class="submit-btn" value="{L_SEARCH}" />
                <div id="val-fix">
                    <label title="{L_FIX_SEARCH_PANEL_EXPLAIN}"><input type="checkbox" id="fix-panel" onchange="_form_fix(this);" {FIX_PANEL_CHECKED} />{L_FIX_SEARCH_PANEL}</label>
                    <label title="{L_LIVE_SEARCH}"><input type="checkbox" id="live-search" onchange="_live_search(this);" {LIVE_SEARCH_CHECKED} />{L_LIVE_SEARCH}</label>
                </div>
            </form>
            <div id="notice" class="notice"></div>
        </div>
    <script>
      _live_search = function(el) {
            if(el.checked == true) {
                setCookie('live_search', true, 365);
                live_search = true;
            } else {
                setCookie('live_search', false, 365);
                live_search = false;
            }
      }
      _form_fix = function(el) {
        search_form = $("#wrap-search-form");
            if(el.checked == true) {
                setCookie('search_panel', 'fix', 365);
                search_form.css({position: "fixed", right: right+"px", top: "3px"});
            } else {
                setCookie('search_panel', 'no_fix', 365);
                search_form.css({position: "absolute", right: "2px", top: "2px"});
            }
      }
      _form_build = function(el) {
        $("#val-search a").addClass("unchecked").removeClass("bold");
            $("#search-form").attr("action", el.name);
            el.className = "checked bold";
            if(el.id == 'search-hash') {
                $('#search').attr({"name":"info_hash", "placeholder":"введите info_hash..."});
            } else {
                $('#search').attr({"name":"nm", "placeholder":"введите запрос..."});
            }
      }
        $(function() {
            bodyWidth = $("body").width();
            bodyCntWidth = $("#body_container").width();
            right = Math.round(((bodyWidth - bodyCntWidth)/2)+7);
            var pos_panel = getCookie('search_panel');
            var live_search = (getCookie('live_search') == 'true') ? true : false;
            if(pos_panel == 'fix') {
                $("#wrap-search-form").css({position: "fixed", right: right+"px", top: "3px"});
            } else {
                $("#wrap-search-form").css({position: "absolute", right: "2px"});
            }
            $('#submit-btn').on("click", function() {
                var errVal = 'пустой запрос';
                if($('#search').val() == '' || $('.search').val() == errVal || strlen($('.search').val()) < 3) {
                    $('#search').attr("placeholder", errVal)
                                            .css({backgroundColor: '#F27474'})
                                            .delay(1000)
                                            .animate({ backgroundColor: "#d8e6ef" }, 2000, function() {
                                                $('#search').attr("placeholder", "введите запрос...");
                                            });
                    return false;
                };
                $("#val-search").remove();
                $('#search-form').submit();
            });
            <!-- IF LOGGED_IN -->
            $('input#search').on("keyup blur mouseleave", function() {
                var val = $(this).val();
                if(strlen(val) > 2 && live_search) {
                    $.post("./../ajax/search.php", { q: val })
                    .done(function( data ) {
                            $("#notice").show().html(data);
                        });
                } else {
                  $("#notice").css({display:"none"});
                }
            });
            <!-- ENDIF -->
        });
    </script>
и css (рисунки не прилагаю... искать лень :( )
HTML: 
.wrap-search-form {
    position: absolute; top: 2px; right: 2px; z-index: 1100;
}
.search-form {
    background: #dfebf3; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RmZWJmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGZhZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfebf3), color-stop(100%,#f4fafe));
    background: -webkit-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
    background: -o-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
    background: -ms-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
    background: linear-gradient(to bottom, #dfebf3 0%, #f4fafe 100%);
    display: block; height: 54px;    margin: 0px auto; position: relative;    text-align: center; width: 504px;
    -moz-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;    -o-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
    -webkit-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff; box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
}
.search {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8yMi8xNOGKk04AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAE70lEQVQ4jYWUW2ycxRXHf+e77N2763visLHjS22HhJAgKqCiVUqh0FZIPAGlFeXyhECoUi9Pfehz+1R6QYpUFeLeeIA2lSJRBLSooWohdtKA7MTxJV4ndpysnd317n7fN/PN9CGO20qJOtLojM7o/DTnP/MfsdZyqyEi6a/98EsHu+9ODKlKod3xZaNWvjD3h++emLLWtm5ZdzOoiPiP/+Lpb/bd2/5kItt1l29H202jA9USTPr0Bom5k1fOXPrd60+8+bq1Vv1f6PAdhwbv+943Xh34sn4wVcyy+dH9UO1AjIt2NzHZKsnSIjGXWD+39s6JH/36hU/eWTh/S+j4vnsGR7/10vH+z7eNdu69QLg4jFk8QCbj4+yYxZYmETFcmx1g7cwAux74CBN8Ovv2M+89MvXBqbkbHO/GopSX5NjLPzuS6ukfrc0lcE2CzjumMcUGjq+R7kVsI4+uF8j1L7Mx18PSX4foOeSOfOHH6kiHFB5Zt9UQwLkB7Xv0xacSPf1fNMYQxyCuwlrwbptGes8jYonrOYLL3VRO7sdYQ9T0OPf+bkL2Hn7olQefusFyti5GEqWx5/ETxFoTE7FxfhdXJ/cjuBD7WCs0lkq4PSvk7jxNSylCo4m1Zn6yRGrP+HPDIs42dHhs7zBtHfu1itBxjIpiIhXRWMsR1bOIc1339MF/0FZsMJTNcvsOl2LCpRVH1DcMqZ72A7sfGxjZ1jQ5MP4ZHeus0gbH0TgiYAVfNG5CgRWUKIZNP3dX7iIf5nCGDa09lmPnUhz9eImF06lscnBsBDjrAdhkLqNULK7WiAAWtCMkpIV4MZEo+lo7uW/5XmreOv9q1amX0/QmNU+Od1FrBvzqb1dIX+hKb7dvGrWG0tpGWhMpRagUkQ65Wk6yNttBWgyDV/dQrbdYym8CBTK5HBfjFKcurfNAf4GurG9Xl9eb21C7NH1WxXE9jCLCSBFGikBFBGHA7N872FjoJhsJK42QxTNFFi82mF/dIGwJ5arGizUdqeRmZXrq7H+e1LmZeVu9ckrFhlYY0gpDgjAiMgFXLwmTf+6ism4otIVk+66h4pi27oDM8Br5fIvQbVLMlE9TW5nfhs5Ya1k5f4QoILaWUKnr8CBCxQHli4q/fNoiF8UUqpZCe8DgwSq3FTcpicOaWQ1V+r2fWGvN/zgqPvbaG2737idk59BXrbUordEiiAjWwvH5CjtSls92pelMBfCxB3WHhdjwYavHdGa/Xb6p98fGx0py+Ok/SWffAQD+a08ZiydwT2+G24tJ+gYVza4ab7ybQtk97B/aOT000Hv/y+OZyrZNAWamZ8p88Puv2NX5P9ooABFwPRAH33XAcXl3OeJo5QqTIzNMBf/87fL0zAubtcv2wsrq+GJ57eiba7Td9D8FKD30+GPJoTufFS9xkGSmF9fziLW2QfPyyKFrU/76yV8e+87xtwBGf/Dai23Z/CsDu0q05/OvysTEhA+0AzkgCXi+7yUHipnmJyfez51qeIcaibZ+LV7KszrIRrXF3XWZ2ve5w5vVRC0TGx12JKNrP59L/LTpFx4tFNrfkomJiT7gYWAf0APkt6Y4juN7jniONVsCixhxrDY2Nsao696j6ggVF3txoSmB2PioB6wAv9k6pQ8ktqI1xmQig7tVvBViAWKgtZXQsSVKuk70/ee/XgP4N92gcjRP1LC0AAAAAElFTkSuQmCC) no-repeat 7px 50% #d8e6ef;
    border-bottom: 1px solid #ebf3f8;    border-left: 1px solid #cadae4;
    border-right: 1px solid #cadae4; border-top: 1px solid #aec1ce;
    color: #304e62;    height: 35px;    margin: 8px 0 0; padding: 0 0 0 41px;
    text-shadow: 0 1px rgba(255, 255, 255, .8);    width: 250px;
    -moz-box-sizing: content-box; -webkit-box-sizing: content-box;
    -webkit-appearance: none; -moz-box-shadow: inset 0 1px #cadae4;
    -o-box-shadow: inset 0 1px #cadae4;    -webkit-box-shadow: inset 0 1px #cadae4; box-shadow: inset 0 1px #cadae4;
}
.search:focus {
    outline: none; -moz-box-shadow: inset 0 0 2px #000;
    -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow: inset 0 0 2px #000;
    box-shadow: inset 0 0 2px #000;
}
.search::-webkit-search-cancel-button, .search::-moz-search-cancel-button {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: url(./images/close.png) 0 0 no-repeat;
    margin-right: 65px;
    cursor: pointer;
}
.submit-btn {
    background: #ffb900; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjkwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb900), color-stop(100%,#ff8c00));
    background: -webkit-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
    background: -o-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
    background: -ms-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
    background: linear-gradient(to bottom, #ffb900 0%, #ff8c00 100%);
    box-shadow: inset 0 1px #ffff00; border: 1px solid #aa7818;    color: #643904;
    cursor: pointer; height: 36px; outline: none;    position: absolute; right: 95px; text-shadow: 0 1px #ffc600;
    top: 8px;    width: 61px; text-align: center;
}
.submit-btn:active {
    background: #ff8c00; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOGMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI5MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8c00), color-stop(100%,#ffb900));
    background: -webkit-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
    background: -o-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
    background: -ms-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
    background: linear-gradient(to bottom, #ff8c00 0%, #ffb900 100%);
}
.notice {
    background: #eef6fb; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZjZmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGU2ZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eef6fb), color-stop(100%,#d8e6ef));
    background: -webkit-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
    background: -o-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
    background: -ms-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
    background: linear-gradient(to bottom, #eef6fb 0%, #d8e6ef 100%);
    color: #304e62;    display: none; /*height: 35px;*/ line-height: 13px; margin: 10px 0px;
    padding: 5px 21px; position: relative; text-shadow: 0 1px rgba(255, 255, 255, .7); width: 462px;
    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); -o-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
    border: 1px solid darkblue; z-index: 1500;
}
.notice span { border-bottom: 1px dotted #000; }
.notice span a { text-decoration: none !important;/* font-size: 13px; */}
.notice p:before {
    background: url(../images/rect.png) no-repeat; content: '';    height: 13px;
    position: absolute;    top: -10px;    width: 22px;
}
.search-form,    .search, .submit-btn, .notice {
    -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
#close-result {
    position: absolute;    top: -12px;    left: -12px; width: 24px;    height: 24px;
    background: transparent url(./images/close.png) 0 0 no-repeat; cursor: pointer;
}
#val-search {    display: inline-block; text-align: left; padding: 3px 0 3px 5px; float: left; width: 100px; }
#val-fix {    display: inline-block; text-align: left; padding: 3px 0 3px 5px; float: right; width: 90px; font-size: 11px; font-family: Arial,Helvetica,sans-serif; font-weight: normal; }
.checked { background: transparent url(../images/checked.png) no-repeat 0 50%; padding-left: 15px;    display: block; text-decoration: none !important; font-size: 11px; font-family: Arial,Helvetica,sans-serif; font-weight: normal; }
.unchecked { background: transparent url(../images/unchecked.png) no-repeat 0 50%; padding-left: 15px;    display: block; text-decoration: none !important; font-size: 11px; font-family: Arial,Helvetica,sans-serif; font-weight: normal; }

Эта часть мода требует только адаптации в дизайн ! Кстати у меня jQuery и версии плагинов последние из существующих... так что возможно что-то не заработает :(
 
Сверху