none
javascript auto complete RRS feed

  • Question

  • Hi Every one,

    I want auto complete for textbox . i have a file upload button for getting text file to come auto complete for text box,but i dont want to use file upload button for uploading a file i want static path to get particular text file.

    i want to take static path file ex:"C:/temp/users.txt"

    can anyone help me please

    i am using below code...............................

    <!-- Scripts by hscripts.com-->
    C:\Users\Ramesh\Desktop
    <!-- More scripts @ www.hscripts.com-->
    <input type="file" id="fileinput" />
    <script type="text/javascript">

     function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var f = evt.target.files[0]; 

        if (f) {
          var r = new FileReader();
          r.onload = function(e) { 
         var contents = e.target.result;
            

    var mailString=contents.substr(0, f.size-1);
    var mailArray=mailString.split(/\n/);
    alert(mailArray);
    suggestions=mailArray; 
          }
          r.readAsText(f);
        } else { 
          alert("Failed to load file");
        }
      }

      document.getElementById('fileinput').addEventListener('change', readSingleFile, false);


    <!-- Declare the array and store the values according to ur usage -->
    var suggestions = new Array();
    var outp;
    var oldins;
    var posi = -1;
    var words = new Array();
    var input;
    var key;
    function setVisible(visi)
    {
    var x = document.getElementById("shadow");
    var t = document.getElementsByName("text")[0];
    x.style.position = 'absolute';
    x.style.top = (findPosY(t)+3)+"px";
    x.style.left = (findPosX(t)+2)+"px";
    x.style.visibility = visi;
    }
    function init()
    {
    outp = document.getElementById("output");
    window.setInterval("lookAt()", 100);
    setVisible("hidden");
    document.onkeydown = keygetter; //needed for Opera...
    document.onkeyup = keyHandler;
    }
    function findPosX(obj)
    {
    var curleft = 0;
    if (obj.offsetParent)
    {
    while (obj.offsetParent)
    {
    curleft += obj.offsetLeft;
    obj = obj.offsetParent;
    }
    }
    else if (obj.x)
    curleft += obj.x;
    return curleft;
    }
    function findPosY(obj)
    {
    var curtop = 0;
    if (obj.offsetParent)
    {
    curtop += obj.offsetHeight;
    while (obj.offsetParent)
    {
    curtop += obj.offsetTop;
    obj = obj.offsetParent;
    }
    }
    else if (obj.y)
    {
    curtop += obj.y;
    curtop += obj.height;
    }
    return curtop;
    }
    function lookAt()
    {
    var ins = document.getElementsByName("text")[0].value;
    if (oldins == ins)
    return;
    else if (posi > -1);
    else if (ins.length > 0)
    {
    words = getWord(ins);
    if (words.length > 0)
    {
    clearOutput();
    for (var i=0;i < words.length; ++i)
    addWord (words[i]);
    setVisible("visible");
    input = document.getElementsByName("text")[0].value;
    }
    else
    {
    setVisible("hidden");
    posi = -1;
    }
    }
    else
    {
    setVisible("hidden");
    posi = -1;
    }
    oldins = ins;
    }
    function addWord(word)
    {
    var sp = document.createElement("div");
    sp.appendChild(document.createTextNode(word));
    sp.onmouseover = mouseHandler;
    sp.onmouseout = mouseHandlerOut;
    sp.onclick = mouseClick;
    outp.appendChild(sp);
    }
    function clearOutput()
    {
    while (outp.hasChildNodes())
    {
    noten=outp.firstChild;
    outp.removeChild(noten);
    }
    posi = -1;
    }
    function getWord(beginning)
    {
    var words = new Array();
    for (var i=0;i < suggestions.length; ++i)
    {
    var j = -1;
    var correct = 1;
    while (correct == 1 && ++j < beginning.length)
    {
    if (suggestions[i].charAt(j) != beginning.charAt(j))
    correct = 0;
    }
    if (correct == 1)
    words[words.length] = suggestions[i];
    }
    return words;
    }
    function setColor (_posi, _color, _forg)
    {
    outp.childNodes[_posi].style.background = _color;
    outp.childNodes[_posi].style.color = _forg;
    }
    function keygetter(event)
    {
    if (!event && window.event)
    event = window.event;
    if (event)
    key = event.keyCode;
    else
    key = event.which;
    }
    function keyHandler(event)
    {
    if (document.getElementById("shadow").style.visibility == "visible")
    {
    var textfield = document.getElementsByName("text")[0];
    if (key == 40)//key down
    {
    if (words.length > 0 && posi <= words.length-1)
    {
    if (posi >=0)
    setColor(posi, "#fff", "black");
    else
    input = textfield.value;
    setColor(++posi, "blue", "white");
    textfield.value = outp.childNodes[posi].firstChild.nodeValue;
    }
    }
    else if (key == 38)
    { //Key up
    if (words.length > 0 && posi >= 0)
    {
    if (posi >=1)
    {
    setColor(posi, "#fff", "black");
    setColor(--posi, "blue", "white");
    textfield.value = outp.childNodes[posi].firstChild.nodeValue;
    }
    else
    {
    setColor(posi, "#fff", "black");
    textfield.value = input;
    textfield.focus();
    posi--;
    }
    }
    }
    else if (key == 27)
    { // Esc
    textfield.value = input;
    setVisible("hidden");
    posi = -1;
    oldins = input;
    }
    else if (key == 8)
    { // Backspace
    posi = -1;
    oldins=-1;
    }
    }
    }
    var mouseHandler=function()
    {
    for (var i=0; i < words.length; ++i)
    setColor (i, "white", "black");
    this.style.background = "blue";
    this.style.color= "white";
    }
    var mouseHandlerOut=function()
    {
    this.style.background = "white";
    this.style.color= "black";
    }
    var mouseClick=function()
    {
    document.getElementsByName("text")[0].value = this.firstChild.nodeValue;
    setVisible("hidden");
    posi = -1;
    oldins = this.firstChild.nodeValue;
    }
    </script>
    <style type="text/css">
    .output
    {
    font-family:Arial;
    font-size: 10pt;
    color:black;
    padding-left: 3px;
    padding-top: 3px;
    border: 1px solid #000000;
    width: 100px;
    background: #fff;
    }
    .shadow
    {
    width:102px;
    ;
    top: 2px;
    left: 2px;
    background: #555;
    }
    .shadow div{
    ;
    top: -2px;
    left: -2px;
    }
    </style>
    <body onLoad="init();">
    <form name="test" id="test">
    <center>
    <input type="text" name="text" autocomplete="off"></center>
    </form>
    <div class="shadow" id="shadow">
    <div class="output" id="output">
    </div>

    Monday, November 30, 2015 6:50 AM

All replies

  • Hi,

    Since this issue is more related to script for IE, I suggest contact The Official Scripting Guys Forum for further troubleshooting. For your reference: https://social.technet.microsoft.com/Forums/scriptcenter/en-US/home?category=scripting

    The reason why we recommend posting appropriately is you will get the most qualified pool of
    respondents, and other partners who read the forums regularly can either share their knowledge or learn from your interaction with us. Thank you for your understanding.


    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Allen Wang
    TechNet Community Support

    Tuesday, December 1, 2015 9:29 AM