A Pen by Mark Lvov

Thumbnail
This awesome code was written by neverfan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright neverfan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mark Lvov</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input id="suggest_address" type="text" value=""/>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/neverfan/a-pen-by-mark-lvov-JdpgzR */
/* opensearch js*/
#opensearch_input {font:11px Tahoma,sans-serif;/*padding-left:5px;*/}
#search_suggestion {z-index: 10; border: 1px solid gray; margin:0;list-style:none;padding:0; border-radius:3px;background:#fffffa;background:-moz-linear-gradient(top, #fffffa 0%,#f8f8f0 100%);}
#search_suggestion li {/*position:relative; */margin:0; padding:3px 90px 3px 7px; font:11px Tahoma,sans-serif;}
#search_suggestion i {position:absolute; right:0px;padding:1px 7px;}
#search_suggestion li.active {background:#fff0e8;text-decoration:underline;}
#search_suggestion li a {color: black; text-decoration:none;}
#search_suggestion li a:hover {color: #ff4000;text-decoration:underline;}
.item_price {background:transparent;border:none;}
/* opensearch js*/

/*Downloaded from https://www.codeseek.co/neverfan/a-pen-by-mark-lvov-JdpgzR */
var suggest_count=0;
var suggest_selected=0;
var input_initial_value='';
var search_suggestion_url="https://suggest-maps.yandex.ru/suggest-geo?callback=show_suggestion&_=1302005670080&lang=ru-RU&ll=30.313928%2C59.938072&spn=0.823315%2C0.675754&highlight=1&fullpath=1&sep=1&search_type=all&part=";
var this_element;

function reposition_search_suggestion(pa){
        var rr=getDim(pa);
        var pos_left = rr.x;
        var pos_top = (rr.y + pa.offsetHeight);
        $('#search_suggestion').css({'left':pos_left,'top':Math.ceil(pos_top)});
}

$(document).ready(function(){
        if(!search_suggestion_url) return;
        var typingTimer;                //timer identifier
        var doneTypingInterval = 42;  //time in ms
var aaa=0;
        if(document.getElementById('search_suggestion')===null){
                $('<ul id="search_suggestion"></ul>').appendTo('body').css({'display':'none','position':'absolute'});
        }
        //Если keyup, start the countdown
        $("#suggest_address").keyup(function(I){
                switch(I.keyCode) {
                        case 18:case 9: break;
                        case 38:case 40:break;
                        default: typingTimer = setTimeout(doneTyping, doneTypingInterval);
                        break;
                }
        });

        $('html').click(function(){
                $('#search_suggestion').hide();
        });

        $('#search_suggestion').click(function(event){
                if(suggest_count)
                        $('#search_suggestion').show();
                event.stopPropagation();
        });

        $("#suggest_address").focusin(function(){
                this_element=this;
                reposition_search_suggestion(this);
                if(suggest_count)
                        $('#search_suggestion').show();
        });


        $("#suggest_address").click(function(event){
                this_element=this;
                if(suggest_count)
                        $('#search_suggestion').show();
                if(suggest_selected>0){
                        $('#search_suggestion li').eq(suggest_selected-1).removeClass('active');
                        suggest_selected=0;
                        $(this).attr('value',input_initial_value);
                }
                event.stopPropagation();
        });
        $("#suggest_address").keypress(function(J) {
                switch(J.keyCode) {
                        case 13:
                                if(suggest_selected===0)
                                        $(this).closest("form").submit();
                                else {
                                        confirm_search();
                                        J.preventDefault();
                                } //window.location=$('#search_suggestion li a').eq(suggest_selected-1).attr('href');
                                return false;
                        case 27:
                                return false;
                }
        });
        
        //on keydown, clear the countdown
        $("#suggest_address").keydown(function(I){
                this_element=this;
                reposition_search_suggestion(this);
                switch(I.keyCode) {
                        case 18:case 9: $('#search_suggestion').hide();break;
                        case 38:case 40:
                                I.preventDefault();
                                if(suggest_count)
                                        key_activate(I.keyCode-39)
                        break;
                        case 13:break;
                        case 27:
                                $(this).click();
                        break;
                        default:
                                clearTimeout(typingTimer);
                        break;
                }
        });

        function doneTyping (){
                $("body").append($('<script charset="utf-8" src="'+search_suggestion_url+escape((encode_utf8($(this_element).val())))+'">'));
        }
});

function confirm_search(value){
        $('#search_suggestion').hide();
        if(value)
        	$(this_element).attr('value',value);
        suggest_selected=0;
        suggest_count=0;
}
        
function getDim(el){
        for (var lx=0,ly=0;el!=null;
                lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
        return {x:lx,y:ly};
}

function chr(code){
        return String.fromCharCode(code);
}

// UTF-8 encode / decode by Johan Sundstr?m
function encode_utf8(s){
        return unescape(encodeURIComponent( s ));
}

function show_suggestion(res){
        if(res[1] && res[1].length){
                input_initial_value=res[0];
                suggest_count=res[1].length;
                suggest_selected=0;
                $('#search_suggestion li').each(function(){$(this).remove()});
                for(var i in res[1]){
                        if(typeof res[1][i][2]==='undefined')
                                continue;
                        var option = document.createElement("li")
                        option.innerHTML='<a href="#" onclick="confirm_search(this.innerHTML);return false;">'+res[1][i][2]+'</a>';
                        document.getElementById('search_suggestion').appendChild(option);
                }
                $('#search_suggestion').show(500);
        }
        else {
                suggest_count=0;
                $('#search_suggestion').hide();
        }
}

function key_activate(n){
        $('#search_suggestion li').eq(suggest_selected-1).removeClass('active');
        if(n===1 && suggest_selected<suggest_count){
                suggest_selected++;
        }
        if(n===-1 && suggest_selected>0){
                suggest_selected--;
        }
        if(suggest_selected>0){
                $('#search_suggestion li').eq(suggest_selected-1).addClass('active');
                $(this_element).attr("value",$('#search_suggestion li a').eq(suggest_selected-1).text());
                $(item_price_element).attr("value",$('#search_suggestion li b').eq(suggest_selected-1).text());
        }
        else {
                $(this_element).attr("value",input_initial_value);
        }
}

function unhtml(s){
        return s.toString().replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"');
}

Comments