custom bootstrap lookup

<apex:page standardController="Contact" >
<apex:stylesheet value="/resource/bootCss"/>
<apex:includeScript value="{!$Resource.jq191}"/>
<apex:includeScript value="{!$Resource.bootJs}"/>

<apex:form id="contact_form">
        <apex:inputField value="{!contact.accountId}" id="accountId"/>
        <div class="input-group">
                 <input id="conactValue" type="text" class="form-control" placeholder="Contact Name" aria-describedby="basic-addon2"
                 onkeypress="if(event.keyCode == 13){$('#cntct').click();}"
                 value="{!contact.account.name}"
                 />
                  <span class="input-group-addon" id="cntct"
                  data-toggle="modal" data-target=".mobile-lookup-modal"
                  onclick="setTargetLookupFieldId('{!$Component.contact_form.accountId}','conactValue');getLookupValues($('#conactValue').val());">Lookup</span>
        </div>
        <apex:commandButton action="{!save}" value="Save" id="theButton"/>
</apex:form>

<!-- lookupCode -->
<div id="lookupModal" class="modal fade mobile-lookup-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
  <div class="modal-dialog modal-lg" >
          <div class="modal-content" style="padding: 20px;background-color: #FFFFFF;">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Contact Name" aria-describedby="basic-addon2" id="lookupSearchVal"/>
                  <span class="input-group-addon" id="go" onclick='getLookupValues($("#lookupSearchVal").val());'>Go</span>
            </div>
            <hr/>
              <h4>Result</h4><p class="text-warning" id="lookupMessage"></p><div id="lookUpResult"></div>
          </div>
  </div>
</div>

<apex:remoteObjects jsNamespace="MyCorpModels">
    <apex:remoteObjectModel name="Account" fields="Name,Id"/>
</apex:remoteObjects>
<script>
    function getLookupValues(qryString) {
        try{
            tmpQryString = qryString;
            qryString = qryString.replace(/\*/g, "%");
            $("#lookupSearchVal").val(tmpQryString);
            if(qryString.length < 4){$("#lookupMessage").html("please type minimun 4 charaters to lookup");$("#lookUpResult").html("");return;}
            else{$("#lookupMessage").html("");}
            $("#lookUpResult").html("<img src='/resource/waiting' />");
            $("#lookupSearchVal").focus();
            var c = new MyCorpModels.Account();
            c.retrieve({ limit: 100, where: {Name: {like: qryString+'%' }} }, function (err, records) {
                if (err) {$("#lookUpResult").html(err); } else {displayLookupQueryResult(records);}
            });
        }catch(err){
            alert(err);
        }
    }
    function displayLookupQueryResult(records){
            try{
                 var resultOutPut = "Total "+records.length+" record(s) ( display only 25 records, refine serach)<br/>";
                 if(records.length>0){
                             resultOutPut += "<table class='table table-striped table-condensed'>";
                            resultOutPut += "<thead>";
                            resultOutPut += "<tr>";
                            resultOutPut += "<th>Name</th>";
                            resultOutPut += "<th>Id</th>";
                            resultOutPut += "</tr>";
                            resultOutPut += "</thead>";
                            resultOutPut += "<tbody>";
                        $.each(records, function() {
                            resultOutPut += "<tr>";
                            var name = "'"+this.get('Name')+"'";
                            var id = "'"+this.get('Id')+"'";
                            resultOutPut += "<td><a href='#' onclick=\"assignVal(" + name+"," + id +");\" >"+this.get('Name')+"</a></td>";
                            resultOutPut += "<td>"+this.get('Id')+"</td>";
                            resultOutPut += "</tr>";
                        });
                            resultOutPut += "</tbody>";
                            resultOutPut += "</table>";
                            resultOutPut += "<hr/>";
                    }
                    $("#lookUpResult").html(resultOutPut);
        }catch(err){
            alert(err);
        }                   
    }   
    $("#lookupSearchVal").keyup(function(event){if(event.keyCode == 13){$("#go").click();}});
    var targetLookupFieldId = "";
    var targetLookupSearchFieldId="";
    function setTargetLookupFieldId(lkFldId,searchLKFieldId){
        targetLookupFieldId = lkFldId;
        targetLookupSearchFieldId = searchLKFieldId;
        //document.getElementById(targetLookupFieldId).value="";
        //document.getElementById(targetLookupFieldId+"_lkid").value="";
    }
    function assignVal(recordName,recordId){
    try{
                document.getElementById(targetLookupFieldId).value=recordName;
                document.getElementById(targetLookupFieldId+"_lkid").value=recordId;
                document.getElementById(targetLookupSearchFieldId).value=recordName;
                $('#lookupModal').modal('hide');
        }catch(err){
            alert(err);
        }       
    }
        function getFieldValue(fieldId){
        return document.getElementById(fieldId).value;
    }
    function setFieldValue(fieldId,fieldVal){
        document.getElementById(fieldId).value=fieldVal;
    }   
   
</script>

</apex:page>