使用jQuery.AutoComplete完成仿淘寶商品搜尋功能(改進了鍵盤上下選擇體驗)
其實這個已經是個比較常見的功能了，網上也有很多人做過這個了，但是很多都是僅僅做了一些基本的網頁上自動完成功能，沒有與具體的資料庫進行聯動，我今天所介紹這個自動完成的就是我修改的jQuery.AutoComplete+資料庫的一個解決方案
首先來看一些效果圖:
這個是淘寶首頁的搜尋效果
京東首頁的搜尋效果
我修改的jQuerzy.AutoComplete實現的效果
一、實現效果分析
我要實現的效果就是和GOOGLE類似，需要滿足一下3個要求（因為這樣我認為是最好的使用者體驗,畢竟GOOGLE做了那麼久了)：
1、首先根據關鍵字列出關鍵字相關的資訊（包含統計資訊）
2、可以使用鍵盤上下鍵選擇（預設不選中第一條），文字框內容根據選擇資訊變換
3、當選擇第一或者最後一條時再向上或向下則取消選中，文字框中內容還原回原先輸入的內容（這點比較重要，京東這個就做不好，因為當在向上向下選擇的過程中因為文字框內容會跟著換，所以就無法還原到當初使用者所輸入的內容了）
二、具體實現分析
首先呢因為具體資料時來自於資料庫,所以首先在資料庫中建立張表用於存放搜尋歷史記錄，每次使用者查詢的其實就是資料庫中的表的記錄（也就是上次查詢這個關鍵字的記錄數）
| 1 2 3 4 5 |
CREATE TABLE[dbo].[t_KeywordSearchHistory]
(
[Keyword]
[nvarchar] (128) primary key,
--關鍵字
[Count]
[int]
NOT NULL ,
--搜尋次數
[RecordCount]
[int]
NOT NULL --符合關鍵字的記錄數
)
|
上面的表僅僅用於存放使用者搜尋的關鍵字，然後在搜尋的儲存過程或者SQL語句中才進行相應的處理，當用戶在頁面上輸入完關鍵字然後再點選搜尋此時需要首先根據關鍵字在資料庫中檢索相應的資料，若此關鍵字有相關資料則向t_KeywordSearchHistory表新增一條資料（若此表中已有此關鍵字則更新搜尋次數和符合關鍵字的記錄數）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
--上面的是具體的SQL查詢程式碼(統計符合關鍵字的商品數量
if
@recordCount>0
begin
if
@keyword <>''
begin
if
exists (select keyword
from t_KeywordSearchHistory
where [email protected])
begin
update t_KeywordSearchHistory
set
Count=Count+1,
[email protected]
where [email protected]
end
相關推薦使用jQuery.AutoComplete完成仿淘寶商品搜尋功能(改進了鍵盤上下選擇體驗)其實這個已經是個比較常見的功能了，網上也有很多人做過這個了，但是很多都是僅僅做了一些基本的網頁上自動完成功能，沒有與具體的資料庫進行聯動，我今天所介紹這個自動完成的就是我修改的jQuery.AutoComplete+資料庫的一個解決方案 首先來看一些效果圖: 這個是淘寶首頁的搜尋效果 jquery---仿淘寶商品圖片區域性放大本篇博文用於簡單記錄圖片放大功能實現 功能實現還存在一些小漏洞在文章結尾提出，希望各位指正 1、圖片放大初考慮將圖片轉換為字型圖片形式，然後進行放大處理，但最終本人技術不過關無法實現，後用width: 200%;進行一般的圖片放大，所以當圖片越大就存在一些失真； 2、圖 仿淘寶商品放大鏡效果效果圖： 原始碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> Android開發仿淘寶商品詳情瀏覽效果 兩步曲效果圖： 第一步佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr Android自定義控制元件實戰——仿淘寶商品瀏覽介面用手機淘寶瀏覽商品詳情時，商品圖片是放在後面的，在第一個ScrollView滾動到最底下時會有提示，繼續拖動才能瀏覽圖片。仿照這個效果寫一個出來並不難，只要定義一個Layout管理兩個ScrollView就行了，當第一個ScrollView滑到底部時，再次向上滑動進入第二 仿淘寶商品瀏覽介面， 向上拉檢視詳情寫的非常棒，用2個ScrollView 實現上拉檢視詳情的功能 但是發現在用在我的專案有點問題，有些小的需求沒有實現，所以就在這位大神的基礎上添加了簡單的功能 1. 事件回撥， 第二頁完全顯示出來的回撥，可以用來載入資料 2. 事件回撥， 當用戶滑到第一個Sc Android 仿淘寶商品詳情標題欄變色，佈局層疊效果如圖效果 思路：如圖可以將圖片中佈局分成三個部分，1標題欄透明背景，2上半部分佈局，3下半部分佈局，當我們向上拉動的時候，1佈局實現漸變，從透明變到白色，2佈局背景色漸變到白色，23佈局隨滾動條上拉，並且慢慢改變2佈局paddingtop的屬性，其中1佈局漂浮在整個scro 仿淘寶商品詳情頁TabLayout+ListView第一次寫部落格，我是一名Android的小碼農寫程式碼也有三四年了。有點好玩的跟大家分享一下 專案對商品詳情頁改版有新需求。頂部是一個漸變的Title包括“寶貝”，“詳情”，“推薦”三個文字，下邊是一個豎向滑動的列表顯示商品詳情和推薦商品。要求兩部分關聯起來，也就是點橫向的 Android 仿淘寶商品詳情頁下拉足跡DemoDropDownMultiPager 仿淘寶等商品詳情頁下拉足跡效果SimpleDemo 可colne之後看MainActivity的呼叫，方便二次開發 依賴 compile 'com.nin 仿淘寶商品詳情頁面Android1、需求： 要實現一個類似淘寶、京東的商品詳情頁面。首先是在看一些前輩的思路，檢視之後，發現博主qifengdeqingchen的文章不錯，然後去下載下來檢視demo。 2、查閱資料 來看看前輩的思路圖。使用兩個scrollView，兩個scr Android開發之仿淘寶商品詳情頁看到有人在問如何實現淘寶商品詳情頁效果，手癢了就擼了一個，獻上效果圖 大致梳理一下思路，這裡不提供原始碼 狀態列透明使用開源庫StatusBarCompat，為了相容手機4.4 dependencies { compile ('com. 仿淘寶商品詳情頁[帶有視訊和圖片的輪播功能]因為工作需求的原因，自己寫了一個demo，既實現了功能，又能與大家分享，很高興！Demo已上傳GitHub，https://github.com/xinniangdeweidao/CloneTaobaoProductsDetails.git 轉載請註明出處，謝謝！ 仿淘寶商品詳情頁，上拉檢視更多詳情demo（Activity和Fragment）。2種應用場景最近專案中有個功能，在課程播放頁，有個講師詳情頁：上面展示文字資訊，下面展示一個webView，但是webView，要通過上拉才出現。網上找的一個開源的demo。對裡面進行了一定的修改，以符合專案要求： https://github.com/cnbleu/ 仿淘寶商品詳情頁中（繼續拖動到圖文詳情）核心view 有2個 一個是自定義的ViewGroup 一個是自定義的ScrollView 首先是自定義的ScrollView public class MyScrollView extends ScrollView { public My 利用ionic裡的和 modal 做個仿淘寶商品詳情頁頂部輪播圖的demo做這個demo之前首先得了解淘寶app商品詳情頁頂部輪播圖都有哪些構造。 1.幾張圖片輪播展示； 2.點選圖片出現全屏圖片輪播展示； 3.點選第幾張圖，全屏展示對應圖片； 4.全屏展示的圖片可以拖拽放大； 5.全屏圖片可以長按儲存。（這點在這個demo中不會出現，因為博主這 【商城開發三】Android 仿淘寶商品詳情頁下拉足跡修改版開發商城的快有半個月了，需要做到詳情頁下拉足跡的效果，網上找了找沒找到，找到一個差不多還有點問題，然後在基礎上進行了二次開發 感謝http://blog.csdn.net/yaphetzhao/article/details/53736471 YaphetZhao的部落格 【Android開發—電商系列】（二）：仿淘寶商品屬性標籤頁一睹為快 需求 1.動態載入屬性，如尺碼，顏色，款式等 由於每件商品的屬性是不確定的，有的商品的屬性是顏色和尺碼，有的是口味，有的是大小，所以這些屬性不能直接寫死到頁面上。 2.動態載入屬性下的標籤 Vue實現仿淘寶商品詳情屬性選擇的功能先看下效果圖：（同個屬性內部單選，屬性與屬性之間可以多選） 主要實現過程： 所使用到的資料型別是（一個大數組裡面嵌套了另一個數組）具體格式如下： attrAndValuees: [ { 'attrId': 1, Android之仿淘寶商品詳情瀏覽效果-----------------轉載請註明出處：http://blog.csdn.net/android_cll 一：先來幾張效果圖，沒有弄gif動畫，也就是商品詳情滑動到底部繼續上滑檢視圖文詳情、 二：實現步驟： 1.自定義一個父容器ScrollVi jQuery列表多條件商品查詢(仿淘寶)index.html程式碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit |