javascript

Question

을 사용하여 NaticScript 목록 뷰를 반환하는 검색 함수 만들기 좋은 하루였습니다. NativeScript를 가지고 놀았으며 .xml이 .js 코드 숨김 페이지에 연결할 수없는 것 같습니다.

최종 목표은 검색 할 수있는 목록 페이지를 만들고 일치하는 데이터가있는 항목 만 반환하는 것입니다. 그것은 쉽게 들리 겠지만, 일련의 멋진 코드 비트를 시도해 보았습니다.

도움을 주시면 감사하겠습니다. 남긴 머리카락을 갖고 싶습니다.

NativeScript 검색 창 속성은 여기에 있습니다 : https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar.html

그들은 또한 내가 믿는이 코드를 제공 타이프 라이터 : 여기 https://docs.nativescript.org/cookbook/ui/search-bar

입니다

var searchBarModule = require("ui/search-bar"); 
var dialogsModule = require("ui/dialogs"); 
var observableModule = require("data/observable") 
var ObservableArray = require("data/observable-array").ObservableArray; 
var page; 

var pageData = new observableModule.fromObject({ 
    list: new ObservableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" }, 
     { name: "one one" } 
    ]), 
    searchtxt:"Search items" 
}); 

exports.loaded = function(args) { 
    page = args.object; 
    page.bindingContext = pageData; 
}; 

exports.searched = function() { 
    var searchtxt = pageData.searchtxt; 
    var list = pageData.list; 

    for(i = 0; i < 3; i++){ 
    if(list[i].indexOf(searchtxt)!=-1){ 
     var newlist.push(searchtxt); 
     console.log(newlist); 
    } 
    } 
}; 

뒤에 내 NativeScript의 .js 코드 내 XML 앞면 페이지

<Page loaded="loaded"> 
    <StackLayout orientation="vertical"> 
    <Image src="res://logo" stretch="none" horizontalAlignment="center" /> 
     <SearchBar id="searchBar" hint="Search" text="{{ searchtxt }}" clear="onClear" submit="searched" /> 

     <GridLayout> 
     <ListView items="{{ list }}"> 
      <ListView.itemTemplate> 
       <Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/> 
      </ListView.itemTemplate> 
     </ListView> 
    </GridLayout> 

    </StackLayout> 
</Page> 

감사합니다.

Answer 1

목록이 표시되면 XML에서 올바르게 읽었 음을 의미합니다. 문제는 검색된 함수 안에 있어야합니다. searchedtxtsearchedtxt에 대한 설정자가 없기 때문에 pageData이 맞는지 확인해 보셨습니까? 텍스트를 얻을 수 있도록

그러나, 나는이 기능 searched의 매개 변수로 args을 통과 제안 정확히 (args.object이 경우 검색 바있다 UI 구성 요소입니다).

검색된 텍스트를 기반으로 한 가지 더 요구 사항과 일치하는 항목이 포함 된 새 목록을 만들지 만 해당 목록을 pageData (bindingContext)으로 설정하지 마십시오. 즉, 새 목록을 만들었지 만 해당 목록을 데이터로 수신하도록 페이지에 지시하지 않았습니다. 여기에 귀하의 질문에 대한 나의 제안은, 그것이 작동하는 희망 :

.js 파일에서 :

// Separate to the originalList so that you can set it to pageData again when user clear the search 
var originalList = new ObservableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" }, 
     { name: "one one" } 
    ]); 

var pageData = new observableModule.fromObject({ 
    list: originalList, 
    searchtxt:"Search items" 
}); 

exports.searched = function(args) { 
    var searchtxt = args.object.text; 
    pageData.list = new ObservableArray(); 

    for(var i = 0; i < originalList.length; i++){ 
    if(originalList[i].name.indexOf(searchtxt) !== -1){ 
     pageData.list.push(pageData.list[i]); 
     console.log(pageData.list); 
    } 
    } 
}; 

Answer 2

는 사실 NativeScript에서와 폰갭으로 멀리 움직였다. 구현하는 것이 훨씬 간단했으며 코드가 예상대로 실행됩니다.

검색 기능에 대한 나의 기본적인 자바 스크립트 솔루션 코드는 여기 Plunker에서 볼 수 있습니다

: https://plnkr.co/edit/RnLYElvk2LaOY0KnePlN?p=info

이 내 일반 검색 기능 솔루션입니다 :

function searchFor() { 
    searchedItems = []; 
    searchTerm = document.getElementById('searchBox').value; 
    for (i = 0; i < data.length; i++) { 

    if (data[i].ID.includes(searchTerm) || data[i].DATA.includes(searchTerm)) { 

     listToShow.push({ 
     "ID": data[i].ID, 
     "LINK": data[i].LINK 
     }); 
     listLinks.push(data[i].LINK); 
     searchedItems.push('<p><a href="#" onclick="loadPage(' + data[i].LINK + ');">' + data[i].ID + '</a></p>'); 

    } 
    } 
    document.getElementById('text').innerHTML = searchedItems; 
}