apicloud搜索框的实现与踩坑

 

 

要求如下图：

 

一、实现思路：
    1、打开frame时，获取存储的数据（getStorage），放入创建的数组中，遍历该数组将item展示出来。有记录时，显示记录，没有记录时显示空；
    2、最多十条记录，记录用 setStorage 存储起来，并放在数组中，最后搜索的记录在最前面；后面搜索的记录如果之前有，删除之前的记录，在数组第一条添加。每点击一次 search （软键盘搜索键），记录一条。
    3、点击记录时，内容显示在 input 输入框中，并直接搜索；被电击的该条数据放到数组第一位。
    4、点击垃圾桶图标，清空数组和被缓存的数据

二、踩坑环节：

 

    1. 在开发中开发者在调试时缓存往往没能清空
    （我在apploader上调试没有什么好的清除缓存的方法，只有2个选择：
        第一，需要清除缓存时，代码最前加 $api.clearStorage()，同步到手机一次；然后去掉该代码，重新进入一次。

 

        第二，卸载apploader，重新安装，因为多次卸载安装，安装包先不删除。）

    2. 用户在刚刚开始使用app时，是没有任何缓存的数据的，并且没有 keyWord 这个索引值。此时打开frame 获取不到缓存会报错。对此，可以在打开frame 时setStorage传入一个缓存值，在存入数组时将该数据删除即可。

    if(!$api.getStorage('keyWord')){
	$api.setStorage('keyWord', '孍');
    }

        此处最好传入生僻字，以免用户重复到该词。

    3. 这一点是我在开发中遇到的最难受的bug，当 arrHistory 值为空时，系统判定它不为数组，所以要先将它转化成数组：

// 加载历史搜索
var searchHistory = [];
function hasHistory(){
    searchHistory = $api.getStorage('keyWord');
    if(JSON.stringify(arrHistory)=='undefined'){
        searchHistory += ' ';
        searchHistory = searchHistory.split(',');
    }
    if(searchHistory.length==1 && searchHistory[0]=='孍' || searchHistory.length==0 ||!searchHistory){
        $api.byId('history-box').innerHTML = '';
    }else{
        var historyHtml = '';
        historyHtml += '<p>'
            +'<span class="history fs14 pl5 c000">历史搜索</span>'
            +'<i class="iconfont icon-lajitongshanchu history-icon fs18" onclick="clearHistory()" Tapmode></i>'
            +'</p>'
            +'<div class="history-list fs12">';
        for(var i in arrHistory){
            historyHtml += '<span class="history-item item" onclick="historyItemToList('+i+')">'+arrHistory[i]+'</span>';
        }
        historyHtml += '</div>';
        $api.byId('history-box').innerHTML = historyHtml;
    }
}

        js代码中声明的 var arrHistory=[ ] 数组，在函数中读取到为 undefined，这是因为在刚刚进入时没有缓存值可获取。设置了刚进入就初始一个缓存值就行。

        以下代码将监听到的 关键词 存入数组并存入缓存中，此时通过arrHistory=$api.getStorage('keyWord');获取到的 arrHistory 是有问题的，不是数组类型，不能直接使用；也不是字符串类型，所以要先转化成字符串类型，再用split 转化为数组类型。再对数组进行操作，加入新的关键词到数组最前，删除不必要的关键词。

// 监听 win 页面的关键词
function listenShopKeyWord(page) {
    api.addEventListener({
        name: 'shopkeyWord'
    }, function(ret, err){
        keyWord = ret.value.keyWord;
        if(keyWord){
            document.getElementById("listData").innerHTML = '';
            searchKeyWord(keyWord, page);
            commonGetStorage(keyWord);
        }else{
            hasHistory();
        }
    });
}
// 搜索关键字
function searchKeyWord(keyWord, page){
    api.ajax({
        url: url,
        method: 'post',
        dataType: 'json',
        data: {
            values: params
        }
    },function(){
        if(ret){
            //正常处理 或 展示搜索结果
        }else{
            alert('请求错误');
        }
    });
}
// 搜索函数公用
function commonGetStorage(content){
    if($api.getStorage('SEARCH_KEY')){
        searchHistory = $api.getStorage('keyWord');
        searchHistory += '';
        searchHistory = searchHistory.split(',');
    } else {
        searchHistory = [];
    }
    // 搜索的长度
    var SEARCH_MAX_LENGTH = 10;
    insertArray(
        searchHistory,
        content,
        SEARCH_MAX_LENGTH
    );
    $api.setStorage('keyWord', searchHistory);
}
// 比较新的 keyWord 与原数组，选择添加方式
function insertArray(arr, val, maxLen) {
    // 先查找数组有没有val 值
    var index = arr.indexOf(val);
    // 如果是第一条数据就不做操作
    if (index === 0) {
        return
    }
    // 如果有 val值 就先删掉再插入
    if (index > 0) {
        arr.splice(index, 1)
    }
    // 没有就直接插入
    arr.unshift(val);
    // 去除 第一个默认历史值
    var i = arr.length-1;
    if(arr[i]=='孍'){
        arr.splice(i, 1);
    }
    if(arr[i]==''){
        arr.splice(i, 1);
    }
    // 超过数组的最大数量就把最后一个删掉
    if (maxLen && arr.length > maxLen) {
        arr.pop();
    }
}
// 点击历史搜索跳转到list
function historyItemToList(i){
    var keyWord = searchHistory[i];
    api.sendEvent({
        name: 'shopClickItem',    //然后在 win 页面监听此事件并获取到 keyWord ，将关键词放到input
        extra: {
            keyWord: keyWord
        }
    });
}
// 清除历史搜索
function clearHistory(){
    document.getElementById('listData').innerHTML = '';
    searchHistory = ['孍'];
    $api.setStorage('keyWord', []);
}

function searchKeyWord(keyWord, page){
    api.ajax({
        url: url,
        method: 'post',
        dataType: 'json',
        data: {
            values: params
        }
    },function(){
        if(ret){
            //正常处理 或 展示搜索结果
        }else{
            alert('请求错误');
        }
    });
}
// 搜索函数公用
function commonGetStorage(content){
    if($api.getStorage('SEARCH_KEY')){
        searchHistory = $api.getStorage('keyWord');
        searchHistory += '';
        searchHistory = searchHistory.split(',');
    } else {
        searchHistory = [];
    }
    // 搜索的长度
    var SEARCH_MAX_LENGTH = 10;
    insertArray(
        searchHistory,
        content,
        SEARCH_MAX_LENGTH
    );
    $api.setStorage('keyWord', searchHistory);
}
// 比较新的 keyWord 与原数组，选择添加方式
function insertArray(arr, val, maxLen) {
    // 先查找数组有没有val 值
    var index = arr.indexOf(val);
    // 如果是第一条数据就不做操作
    if (index === 0) {
        return
    }
    // 如果有 val值 就先删掉再插入
    if (index > 0) {
        arr.splice(index, 1)
    }
    // 没有就直接插入
    arr.unshift(val);
    // 去除 第一个默认历史值
    var i = arr.length-1;
    if(arr[i]=='孍'){
        arr.splice(i, 1);
    }
    if(arr[i]==''){
        arr.splice(i, 1);
    }
    // 超过数组的最大数量就把最后一个删掉
    if (maxLen && arr.length > maxLen) {
        arr.pop();
    }
}
// 点击历史搜索跳转到list
function historyItemToList(i){
    var keyWord = searchHistory[i];
    api.sendEvent({
        name: 'shopClickItem',    //然后在 win 页面监听此事件并获取到 keyWord ，将关键词放到input
        extra: {
            keyWord: keyWord
        }
    });
}
// 清除历史搜索
function clearHistory(){
    document.getElementById('listData').innerHTML = '';
    searchHistory = ['孍'];
    $api.setStorage('keyWord', []);
}

    因为 searchHistory 为空会报错，所以只能赋个偏僻字，用 $api.setStorage('keyWord', []); 而不用 clearStorage 清空缓存是因为 app 中缓存往往不止这一类。

    最后，感觉自己目前写的这些并不令人满意，待有更高质量的代码再来更新。同行如果有更好的方法，希望留言一起探讨，一起进步。