在輸入查詢時，每個字母都會產生新的單頁。應該如何防止？

我在工作，我必須創建一個搜索引擎的項目。我面臨的問題是，無論何時用戶鍵入查詢每個字母輸入一個新的頁面正在被複制。例如，如果我鍵入 - 'fos'，則正在製作3頁。如果我輸入'窩'，正在製作5頁。在輸入查詢時，每個字母都會產生新的單頁。應該如何防止？

我在我的項目中使用了REDX架構和角度2。我應該如何解決這個問題？感謝提前:)

onquery(event: any) { 
    if (event.target.value.length > 2) { 
    this.store.dispatch(new query.QueryAction(event.target.value)); 
    this.displayStatus = 'showbox'; 
    this.submit(); 
    this.hidebox(event); 
    } 
    } 
submit() { 
    this.router.navigate(['/search'], {queryParams: this.searchdata}); 
}

HTML

<input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery($event)" 
      [(ngModel)]="searchdata.query" autocomplete="off">

減速代碼 -

export const CHANGE = 'CHANGE'; 

export interface State { 
    searchresults: any; 
    items: any; 
} 

const initialState: State = { 
    searchresults: {}, 
    items: [] 
}; 

export function reducer(state: State = initialState, action: search.Actions): State { 
    switch (action.type) { 
    case search.ActionTypes.CHANGE: { 
     const search = action.payload; 
     return Object.assign({}, state, { 
     searchresults: search, 
     items: search.channels[0].items 
     }); 
    } 
    default: { 
     return state; 
    }

來源

2017-06-05 Harshit Prasad

請詳細說明添加一些代碼。您是否在角度2項目中鍵入文本框，該文本應該是對服務器執行http調用以檢索搜索結果並顯示在搜索框的下拉列表中？ –

@VinayPrabhakaran我用代碼更新了我的問題。有''onquery（）'函數，這將被稱爲無論何時輸入查詢。 –

@Harshit我試圖以通用的方式回答你的問題。但請修改你的問題海事組織，它不是很清楚。謝謝！ – GibboK

您在每個呼叫onquery keyup

onquery打電話給submit

submit正在呼叫router.navigate確實在導航！（因此會在您的屏幕截圖中顯示瀏覽器歷史記錄）

爲什麼要在用戶仍在鍵入時導航到搜索頁？

請立即撥打ngSubmit的submit功能放置在您的form元件上，像這樣

<form (ngSubmit)="submit()"> 
    <input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery($event)" 
      [(ngModel)]="searchdata.query" autocomplete="off"> 
</form>

來源

2017-06-05 23:31:28 Faris

謝謝你！它的作用就像一種魅力。 :) –

有一件事，'sumbit（）'作爲即時搜索功能。現在它從'onquery（）'中移除後無法工作。有沒有其他的解決方案，它也沒有干擾即時搜索功能？雖然我按Enter鍵時會得到結果。 –