datalist with knockout

   <div class="col-xs-6 col-sm-3">
            <input class="form-control input-sm" list="BookNameList" maxlength="50" style="padding-top:0px;overflow-y:scroll;height:350px;overflow-x: hidden" type="text" data-bind="value:BookObj.BookName">
            <datalist id="BookNameList" data-bind="foreach: GetBookNamesListArray()"><option data-bind="text: $data.BookName"></option></datalist>
        </div>


function ManageBooksUI() {

    var self = this;

    self.ListBooksArray = ko.observableArray([]);

    self.BookObj = ko.observable();

    // Get the List of Books based on BookName,AuthorName,BookClassificationID,IsNew
    self.BindBookList = function (BooksArray) {
        self.ListBooksArray.removeAll();
        ko.utils.arrayForEach(BooksArray, function (rslt) {
            self.ListBooksArray.push(new BooksDTO(rslt));
            self.PagingSetUp.TotalRecordsCount(rslt.TotalRecordsCount)
        });
    }

 //----------------------- Get Search Dropdown Data -------------------------------------------------------------

    // Get the List of BookNames 

    self.GetBookNamesListArray = ko.observableArray([]);

    self.GetBookNamesList = function (BookNamesArray) {

        self.GetBookNamesListArray.removeAll();

        ko.utils.arrayForEach(BookNamesArray, function (rslt) {

            self.GetBookNamesListArray.push(new BooksDTO(rslt));

        });

    }