PhoneGap не работает с полем ввода, чтобы найти имя контакта и номер телефона, почему?

Question

Я следовал всем инструкциям в документации, но не получил результата, я не понимаю, почему я новичок в этом.Спасибо за вашу помощь в продвинутом!Надеюсь, я правильно понял вопрос. Итак, я хочу, чтобы пользователь указал имя в поле и выполнил поиск в списке контактов телефона Android

function showConfirm() {
        navigator.notification.confirm('Permission to access contact information?', onConfirm, 'WARNING', ['Yes','No']);            
    }

    function onConfirm(buttonIndex) {
            if (buttonIndex ==2)
            {
                alert('Whatever');
            }else { 
               var x =app.listContacts();
            }
    }

var app = {
    initialize: function() {
        document.addEventListener('deviceready',app.onDeviceReady, false);
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function () {

        var p =document.getElementById('deviceinfo');
        p.innerHTML = device.cordova + '<br/>'+
        device.plataform + '<br/>' +
        device.model + '<br/>' +
        device.uuid + '<br/>' +
        device.version + '<br/>' +
        device.manufacturer + '<br/>' +
        device.isVirtual + '<br/>' +
        device.serial + '<br/>' ;
        app.receivedEvent('deviceready');
        return p.innerHTML;
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },

    listContacts: function(){
        function onSuccess(contacts) {
            // for (var i=0; i < contacts.length; i++){
            //     var x = document.getElementById('cont');
            //     var phone = contacts[i].phoneNumbers;
            //     var fone = JSON.stringify(phone);
            //     x.innerHTML +='Name:' + i + ' ' + contacts[i].name.formatted + ' ' + ' mobile:' + fone + '<br/>';
            // }

            for(var i=0; i < contacts.length; i++){
                // document.getElementById('cont').innerHTML += "Contact " + "<br/>";
                document.getElementById("cont").innerHTML += "Name:" + contacts[i].name.formatted;

                for(var j=0; j < contacts[i].phoneNumbers.length; j++){
                    document.getElementById("cont").innerHTML += "<br/>" + "Phone" + ": " + contacts[i].phoneNumbers[j].type + ": " + contacts[i].phoneNumbers[j].value + "<br/>";
                }
                document.getElementById("cont").innerHTML += "<br/>";
            }
        }

        function onError(contactError) {
            alert('onError!');
        }

        var options = new ContactFindOptions();
        options.filter="";
        options.multiple = true;
        options.desiredFields = [navigator.contacts.fieldType.id];
        var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
        // var fields = ["*"];
        // navigator.contacts.find(fields, onSuccess, onError, options);
        navigator.contacts.find(["*"], onSuccess, onError);
        location.href='index.html#page3';
    },
    createContact: function(){
        function onSuccess(contact) {
            alert("Save Success");
        };

        function onError(contactError) {
            alert("Error = " + contactError.code);
        };

        // create a new contact object
        var contact = navigator.contacts.create();
        contact.displayName = documentgetElementById("create").value;
        contact.nickname = documentgetElementById("createOrigin").value;
        // specify both to support all devices

        // populate some fields
        var name = new ContactName();
        name.givenName = documentgetElementById("firstName").value;
        name.familyName = documentgetElementById("lastName").value;
        contact.name = name;

        // save to device
        contact.save(onSuccess,onError);
    },
    // pickContact: function (){

    //     navigator.contacts.pickContact(function(contact){
    //         console.log('The following contact has been selected:' + JSON.stringify(contact));
    //     },function(err){
    //         console.log('Error: ' + err);
    //     });
    // },
    findContact:function()
    {
        function onSuccess(contacts) {
            var y = document.getElementById('find');
            var inputPage = document.getElementById('findContact').value;

            for (var i=0; i < contacts.length; i++){
                for (var j=0; j<contacts[i].displayName.length; j++){
                    var obj =contacts[i].displayName[j].value;
                    if (obj == inputPage){

                    // var json = JSON.parse(obj);
                    y.innerHTML +='Name:' + obj;
                    }
                }
            }

        }
        function onError(contactError) {
            alert('onError!');
        }
        var options = new ContactFindOptions();
        // options.filter = inputPage;
        options.multiple = true;
        filter = ["displayName"];
        options.desiredFields = [navigator.contacts.fieldType.displayName,navigator.contacts.fieldType.phoneNumbers];
        navigator.contacts.find(filter, onSuccess, onError);
        location.href='index.html#page4';
    }
};
app.initialize();

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>App newbie</title>
</head>

<body>
    <div data-role="page" id="page1">
        <div data-role="header" id="header1">
            <h1> Search/Add Device</h1>
        </div> <!-- div header -->
        <div data-role="main" id="main1" class="ui-content">

            <input type="text" id="create" value="">Please insert a display name</input>
            <br/>
            <input type="text" id="createOrigin" value="">Company name</input>
            <br/>
            <input type="text" id="firstName" value="">Given name</input>
            <br/>
            <input type="text" id="lastName" value="">Family name</input>
            <button id="btnCreate" onclick="app.createContact();">Create Contact</button>
            <button id="btnDevinfo" onclick="location.href='index.html#page2'">Show Device Info</button>
            <button id="btnContact" onclick="showConfirm();">Display Contact list</button>
            <!-- <button id="btnSearch" onclick="app.findContact();">Search Contact list</button> -->
            <br/>
            <input type="text" id="findContact" value=""></input>
            <button id="btnSearch" onclick="app.findContact();">Find Contact</button>
        </div><!-- div main -->

        <div data-role="footer" id="footer">
            <h1>app</h1>
        </div> <!-- footer-->
    </div>  <!-- page 1-->

     <div data-role="page" id="page2">
        <div data-role="header" id="header">
            <h1> Device Info and Contacts</h1>
        </div> <!-- div header -->
        <div data-role="main" id="main2" class="ui-content">
            <label for="lblDevinfo">device information</label>
                <div id="deviceinfo"></div>
                <button id="btnBack" onclick="location.href='index.html#page1'">Back Main</button>
        </div><!-- div main -->
        <div data-role="footer" id="footer">
            <h1>app</h1>
        </div> <!-- footer-->
    </div>  <!-- page 2-->

    <div data-role="page" id="page3">
        <div data-role="header" id="header">
            <h1>List of Contacts</h1>
        </div> <!-- div header -->
        <div data-role="main" id="main3" class="ui-content">
            <label for="lblDevinfo">Contacts information</label>
                <div id="cont"></div>
                <button id="btnBack" onclick="location.href='index.html#page1'">Back Main</button>
        </div><!-- div main -->
        <div data-role="footer" id="footer">
            <h1>app</h1>
        </div> <!-- footer-->
    </div>  <!-- page 3-->


    <div data-role="page" id="page4">
        <div data-role="header" id="header">
            <h1> Find Contacts</h1>
        </div> <!-- div header -->
        <div data-role="main" id="main4" class="ui-content">
            <label for="lblDevinfo">Contacts information</label>
                <div id="find"></div>
                <button id="btnBack" onclick="location.href='index.html#page1'">Back Main</button>
        </div><!-- div main -->
        <div data-role="footer" id="footer">
            <h1>app</h1>
        </div> <!-- footer-->
    </div>  <!-- page 4-->

</body>