티타늄 및 안드로이드의 텍스트 필드 자동 완성

Question

나는 애플, 비행기 등과 같은 관련 단어를 보여 주어야만하는 것처럼 자동 완성 텍스트 상자를 원한다. 비슷한 Google search.is와 같은 방식으로이 작업을하고 싶다. 티타늄에 ios와 android. 예제 코드가 있거나 티타늄으로는 불가능합니다.

Answer 1

textField.addEventListener('change', function(e) { 
    // you can fill a tableView in this event with the suggested data 
}); 

또는이 튜토리얼 링크가 문제 AutoCompleteTextField

Answer 2

다음 코드는 당신을 위해 작동 해결할 수 있습니다. 시도하고 필요에 따라 수정하십시오. 여기에 배열 (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

Answer 3

멋진 내가 테이블 행

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

    }); 

로 DISPALY 안드로이드 자동 주소 제안 바 당신을 위해

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

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

     }, 
    }); 

당신의 결과를 몇 가지 예제를 제공하고 이벤트의 청취자를 추가 할 수 있습니다 변경 및 모든 통화 변경 기능을 값으로 사용하고 값이 비어 있으면보기에서 테이블을 제거하십시오.

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); 
     } 
    }); 

자동 complte에 기능 다음 10

전화

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(); 

    }