在哪里传递锚标签

时间：2018-09-05 08:51:57

标签： jquery node.js ajax

我正在尝试从开放图书馆的书api中获取数据，我已经在ui中获取了数据，但是找不到应该在哪里放置锚标记。 数据正在获取，但不知道在哪里放置锚标记，以便我可以调用该页面。 我想在用户搜索输入任何名称时获取记录，这部分完成了 现在我想将锚标记放在记录中的位置

var books = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://openlibrary.org/search.json?title=%QUERY',
    wildcard: '%QUERY',
    filter: function(searchResults) {
      return $.map(searchResults.docs, function(searchResults) {
        // console.log(searchResults.author_name);
        // console.log("key is "+searchResults.key)
        if (JSON.parse(sessionStorage.getItem("selectedBooks") == undefined || JSON.parse(sessionStorage.getItem("selectedBooks").indexOf(searchResults.title)) == -1)) {
          return {
            title: searchResults.title,
            key: searchResults.key,
          };
        }
      });
    }
  }
});
var authorsList = [];
var authors = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://openlibrary.org/search.json?author=%QUERY',
    wildcard: '%QUERY',
    filter: function(searchResults) {
      return $.map(searchResults.docs, function(searchResults) {
        if (searchResults.author_name !== undefined) {
          var author = searchResults.author_name.toString();
        }
        if (authorsList.indexOf(author) == -1) {
          authorsList.push(author);
          return {
            author_key: searchResults.author_key,
            author: author,
          };
        }
      });
    },
  }
});
$('#multiple-datasets .typeahead').typeahead({
  highlight: true
}, {
  name: 'books',
  display: 'title',
  source: books,
  templates: {
    header: '<h3 class="search">Books</h3>'
  }
}, {
  name: 'authors',
  display: 'author',
  source: authors,
  templates: {
    header: '<h3 class="search">Authors</h3>'
  }
});

$('#multiple-datasets').bind('typeahead:selected', function(obj, datum, name) {
  if (name == 'books') {
    var selectedBooks = JSON.parse(sessionStorage.getItem("selectedBooks"));
    if (selectedBooks == null) {
      var a = [];
      a.push(datum.title);
      sessionStorage.setItem("selectedBooks", JSON.stringify(a));
    } else {
      selectedBooks.push(datum.title);
      sessionStorage.setItem("selectedBooks", JSON.stringify(selectedBooks));
    }

  } else if (name == 'authors') {

    var selectedAuthors = JSON.parse(sessionStorage.getItem("selectedAuthors"));
    if (selectedAuthors == null) {
      var a = [];
      a.push(datum.author);
      sessionStorage.setItem("selectedAuthors", JSON.stringify(a));
    } else {
      selectedAuthors.push(datum.author);
      sessionStorage.setItem("selectedAuthors", JSON.stringify(selectedAuthors));
    }
  }
  $('.typeahead').typeahead('val', '');
  update_lists(JSON.parse(sessionStorage.getItem("selectedAuthors")), JSON.parse(sessionStorage.getItem("selectedBooks")));
});

update_lists(JSON.parse(sessionStorage.getItem("selectedAuthors")), JSON.parse(sessionStorage.getItem("selectedBooks")));



function update_lists(Authors, Books) {
  $('#authorlist li').remove();
  $('#booklist li').remove();
  $.each(Authors, function(index, name) {
    // console.log("Its author data"+authors.name);
    $('#authorlist').append('<li><a href="#" >' + name + '</a></li>')
  });
  $.each(Books, function(index, name) {
    console.log("Book Data" + books);
    $('#booklist').append('<li><a href="#" >' + name + '</a></li>')
  });
}
/* scaffolding */
/* ----------- */

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}

a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p+p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 600px;
  margin: 12px 400px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
  text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-menu {
  text-align: right;
}

#multiple-datasets .search {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
        src="http://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.bundle.min.js"></script>
<div id="multiple-datasets">
  <form class="example" action="#">
    <input class="typeahead" type="text" placeholder="Enter The Book Name to Search" name="search">
  </form>
</div>

1 个答案:

答案 0 :(得分：1)

  

用此代码替换您的脚本标签。会工作

 <script>
var books = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://openlibrary.org/search.json?title=%QUERY',
        wildcard: '%QUERY',
        filter: function (searchResults) {
            return $.map(searchResults.docs, function (searchResults) {
                //  console.log(searchResults.author_name);
                // console.log("key is "+searchResults.key)
                if (JSON.parse(sessionStorage.getItem("selectedBooks") == undefined || JSON.parse(sessionStorage.getItem("selectedBooks").indexOf(searchResults.title)) == -1)){
                    return {
                        title: searchResults.title,
                        key: searchResults.key,
                    };
                }
            });
        }
    }
});
var authorsList = [];
var authors = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://openlibrary.org/search.json?author=%QUERY',
        wildcard: '%QUERY',
        filter: function (searchResults) {
            return $.map(searchResults.docs, function (searchResults) {
                if (searchResults.author_name !== undefined){
                    var author = searchResults.author_name.toString();
                }
                if (authorsList.indexOf(author) == -1) {
                    authorsList.push(author);
                    return {
                        author_key: searchResults.author_key,
                        author: author,
                    };
                }
            });
        },
    }
});
$('#multiple-datasets .typeahead').typeahead({
        highlight: true
    },
    {
        display: 'title',
        source: books,
        templates: {
            header: '<h3 class="search">Books List</h3>'
        }
    },
    {
        name: 'authors',
        display: 'author',
        source: authors,
        templates: {
            header: '<h3 class="search">Authors List</h3>'
        }
    });
$('#multiple-datasets').bind('typeahead:selected', function(obj, datum, name) {
    console.log(datum);
    if (name === 'authors'){
     var  request =  $.ajax({

         type: 'POST',
         url: `http://localhost:9090/history`,
         data: {author: datum.author}
           });
           request.done(function (msg) {
               window.location.href="/author/authors/" +datum.author_key[0];
           });
        request.fail(function (jqXHR,textStatus) {
            alert("Request Failed"+textStatus);

        });
    }
    else
    {
        var  request =  $.ajax({

            type: 'POST',
            url: `http://localhost:9090/history`,
            data: {book: datum.title}
        });
        request.done(function (msg) {
            window.location.href="/book" +datum.key;
        });
        request.fail(function (jqXHR,textStatus) {
            alert("Request Failed"+textStatus);

        });

    }

});
 </script>
相关问题
最新问题