FAYT

Find as you type with Pouchdb on multiple fields.

by Erik

HTML

<script src="https://crm.windsurfschool.nl/plugins/pouchdb-6.4.3.min.js"></script>
<input type='text' id='search'>
<div id='status'></div>
<div id='result'></div>

JavaScript

const db = new PouchDB('test');

const search = document.getElementById('search');
const status = document.getElementById('status');
const result = document.getElementById('result');

search.addEventListener('keyup',find);

let ddoc = {
  _id: '_design/index',
  views: {
    index: {
      map: function mapFun(doc) {
        emit(doc.firstname);
        emit(doc.lastname);
        emit(doc.email);
      }.toString()
    }
  }
}

db.info().then(function(res){
  if (res.doc_count === 0 ) {
    db.put(ddoc);
    fillDB();
  }
}).catch(function (err) {
  console.log(err);
})

function fillDB(){
  let docs = [{firstname: 'eric', lastname: 'johnson', email:'[email protected]'},{firstname: 'john', lastname: 'ericson', email:'[email protected]'},{firstname: 'jane', lastname: 'johnson', email:'[email protected]'},{firstname: 'erik', lastname: 'hill', email:'[email protected]'},{firstname: 'marc', lastname: 'marcussen', email:'[email protected]'},{firstname: 'hilda', lastname: 'hill', email:'[email protected]'}];

  for (let i=0; i < 1000; i++){
    let j = Math.floor(Math.random() * Math.floor(5));
    let doc=docs[j];
    doc._id = 'doc'+i;
    db.put(doc);
  }
}

function find() {
  status.innerHTML = 'status: starting query'
  result.innerHTML = '';
  let query = search.value;

  db.query('index',{
    startkey: query, 
    endkey: query+'\uffff',
    include_docs: true
  }).then(function(res){
    let deduped = dedupe(res.rows, "id")
    for (let i=0; i< deduped.length; i++) {
      result.innerHTML += '<p>' + deduped[i].id + ':  ' + deduped[i].doc.firstname + ' ' + deduped[i].doc.lastname + ' ' + deduped[i].doc.email + '</p>';
    }
    status.innerHTML = 'status: finished query'
  }).catch(function(err){
    console.log(err);
  })
}

function dedupe(arr, key) {
  return arr.filter((obj, index, arr) => {
    return arr.map(mapObj => mapObj[key]).indexOf(obj[key]) === index;
  });
}