3

aを押すと、リンゴ、飛行機などの関連する単語が表示されるように、オートコンプリートテキストボックスが必要です.同様のGoogle検索のようにしたい.チタンのiosとandroidでこの操作のようなコントロールはありますか.サンプルコードのヘルプまたはそれはチタンでは無理？

4

3 に答える 3

3

次のコードが役に立ちます。それを試して、必要に応じて変更してください。ここでは、array（searchArray）をデータストレージとして使用しました（必要に応じて、データベースフィールドまたはソースに置き換えることができます）。

//Table view showing your autocomplete values
var tblvAutoComplete = Ti.UI.createTableView({
    width           : '100%',
    backgroundColor : '#EFEFEF',
    height          : 0,
    maxRowHeight    : 35,
    minRowHeight    : 35,
    allowSelection  : true
});
//Starts auto complete
txtAutoComplete.addEventListener('change', function(e){ 
    var pattern = e.source.value;
    var tempArray = PatternMatch(searchArray, pattern);
    CreateAutoCompleteList(tempArray);
});
//You got the required value and you clicks the word
tblvAutoComplete.addEventListener('click', function(e){
    txtAutoComplete.value = e.rowData.result; 
});

//Returns the array which contains a match with the pattern
function PatternMatch(arrayToSearch, pattern){
    var searchLen = pattern.length;
    arrayToSearch.sort();
    var tempArray = [];
    for(var index = 0, len = arrayToSearch.length; index< len; index++){
        if(arrayToSearch[index].substring(0,searchLen).toUpperCase() === pattern.toUpperCase()){
            tempArray.push(arrayToSearch[index]);
        }
    }
    return tempArray;
}
//setting the tableview values
function CreateAutoCompleteList(searchResults){
    var tableData = [];
    for(var index=0, len = searchResults.length; index < len; index++){

            var lblSearchResult = Ti.UI.createLabel({
                top            : 2,
                width          : '40%',
                height         : 34,
                left           : '5%',
                font           : { fontSize : 14 },
                color          : '#000000',
                text           : searchResults[index]
            });

            //Creating the table view row
            var row = Ti.UI.createTableViewRow({
               backgroundColor : 'transparent',
               focusable       : true,
               height          : 50,
               result          : searchResults[index]
            });

            row.add(lblSearchResult);
            tableData.push(row);
    }
    tblvAutoComplete.setData(tableData);
    tblvAutoComplete.height = tableData.length * 35;
}

このコードは、iOSとAndroidの両方で機能しました。あなたの問題が解決されることを願っています：D

于 2012-12-17T13:07:59.630 に答える
3

Androidの自動アドレス提案バーを使用して、いくつかの例を挙げましょう

var search = Titanium.UI.createTextField({
 height : '40sp',
        hintText : 'Search',
        top : '3sp',
        right : '0%',
        width : '73%',
        textAlign : 'left',
        font : {

            fontFamily : 'Verdana',
            fontSize : '13sp',

        },
    });

結果は表の行として表示されます

var resulttable = Ti.UI.createTableView({
        top : '0%',
        left : '0%',
        width : '100%',
        height : '100%',
        separatorColor : '#000000',

    });

イベントリスナーを変更として追加し、値を使用して変更呼び出し関数を追加し、値が空の場合はビューからテーブルを削除します

search.addEventListener("change", function(event, type) {
        Titanium.API.info("in change event listener");
        if ('' != search.value) {
            tabgroupContentView.add(resulttable);
            if (resulttable.data.length > 0) {
                for (var i = resulttable.data[0].rows.length - 1; i >= 0; i--) {
                    resulttable.deleteRow(i);
                }
            }
            auto_complete(search.value);
        } else {
            tabgroupContentView.remove(resulttable);
        }
    });

次の関数を呼び出してオートコンプリートします

function auto_complete(search_term) {

        loader.open("GET", "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" + search_term + "&types=geocode&language=en&sensor=true&key=bar blar blar this is my key use ur one");

        loader.onload = function() {

            var histryresult = eval('(' + this.responseText + ')');
            jsonArry = histryresult.predictions;
            jsonArryterms = histryresult.terms;
            for (var i = 0; i < jsonArry.length; i++) {

                var service_row = Ti.UI.createTableViewRow({
                    height : '70sp',
                    width : '100%',
                    backgroundColor : '#ffffff',
                    backgroundFocusedColor : '#FF8F2F',
                    backgroundSelectedColor : '#FF8F2F',
                    hasChild : false
                });

                var lbl_oderid = Ti.UI.createLabel({
                    left : '3%',
                    top : '10%',
                    text : jsonArry[i].terms[1].value,
                    color : '#A70CAF',
                    font : {
                        fontSize : '17sp',
                        fontWeight : 'bold'
                    },
                    height : 'auto',
                    width : 'auto'
                });

                var descriptiontext;
                if (jsonArry[i].description == undefined) {
                    descriptiontext = 'Not Valable';
                } else {
                    descriptiontext = jsonArry[i].description;
                }

                var lbl_description = Ti.UI.createLabel({
                    left : '5%',
                    top : '50%',
                    text : descriptiontext,
                    color : '#000000',
                    font : {
                        fontSize : '12sp',

                    },
                    height : 'auto',
                    width : 'auto'
                });

                service_row.add(lbl_oderid);
                service_row.add(lbl_description);
                service_row.addEventListener('click', function(e) {

                    var locaName = jsonArry[e.index].description;

                    if (jsonArry[e.index].description == undefined) {

                    } else {
                        reversGeoloader.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + locaName + "&sensor=false");

                        reversGeoloader.onload = function() {

                            var geoResult = eval('(' + this.responseText + ')');
                            jsonArry = geoResult.results;

                            var newlat = jsonArry[0].geometry.location.lat;
                            var newlng = jsonArry[0].geometry.location.lng;

                            curentlatitude = newlat;
                            curentlongitude = newlng;

                            getReversGeo(curentlatitude, curentlongitude, 'str');
                            usercurentlocation.setText('Set by serch');
                            tabTestWindow.close();

                        };
                        reversGeoloader.send();
                    }

                });

                resulttable.appendRow(service_row);

            }

        };
        loader.send();

    }
于 2013-10-06T14:37:43.893 に答える
2 
textField.addEventListener('change', function(e) {
    // you can fill a tableView in this event with the suggested data
});

または、このチュートリアルリンクで問題が解決する場合があります AutoCompleteTextField

于 2012-12-17T10:00:24.717 に答える