Pulling my hair out on this one. I have a table with about 200+ entries. I would like to be able to search by name and have the item come up if the search term is part of the name. I have managed to create a search infrastructure if I list out all the headers manually, but then that generates empty headers whenever the list populates. Any idea on how to search the ‘title’ category without manually listing each title? the table is likely to change, so this would be an upkeep nightmare down the road. The following is my code, any help would be appreciated:
[code]
local ui = require(“ui”)
local viewController = require(“viewController”)
local director = require(“director”)
local tableView = require(“tableView”)
local mainView, tabView, currentScreen, tabBar
function new()
local g = display.newGroup()
–import the table view library
local tableView = require(“tableView”)
–import the button events library
local ui = require(“ui”)
local director = require(“director”)
local tabledata = require(“tabledata”)
–initial values
local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
local myList, backBtn, detailScreenText
local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
g:insert(background)
background:setFillColor(255, 255, 163)
–setup a destination for the list items
local detailScreen = display.newGroup()
–g:insert(detailScreen)
—Create Text Fields------------------------------------------------------------------------------------
local widget = require “widget”
local sbHeight = display.statusBarHeight
local tbHeight = 44
local top = sbHeight + tbHeight
local inputsearch = {“1. item1”, “2. item 2”, “3. Item 3”, “4. item4” }
– forward declarations
local titleField, noteText, loadSavedNote, saveNote
– create a gradient for the top-half of the toolbar
local toolbarGradient = graphics.newGradient( {168, 181, 198, 255 }, {139, 157, 180, 255}, “down” )
– create embossed text to go on toolbar
local titleText = display.newEmbossedText( “”, 0, 0, native.systemFontBold, 60 )
titleText:setReferencePoint( display.CenterReferencePoint )
titleText:setTextColor( 255 )
titleText.x = display.contentWidth/2
titleText.y = 30
– create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( “shadow.png” )
shadow:setReferencePoint( display.TopLeftReferencePoint )
shadow.x, shadow.y = 0, top
shadow.xScale = 320 / shadow.contentWidth
shadow.yScale = 0.25
local saveBtn = widget.newButton{
label = “”,
labelColor = { default={255}, over={255} },
font = native.systemFontBold,
xOffset=2, yOffset=-1,
default = “save-default.png”,
over = “save-over.png”,
width=120, height=60,
left=display.contentWidth-123, top=10
}
– onRelease listener callback for saveBtn
local function onSaveRelease( event )
loadSavedNote()
end
saveBtn.onRelease = onSaveRelease – set as saveBtn’s onRelease listener
local textFont = native.newFont( native.systemFont )
local currentTop = sbHeight+tbHeight+shadow.contentHeight+10
local padding = 10
– create textField
titleField = native.newTextField( padding, 5, display.contentWidth-(padding*14), 80 )
titleField.font = textFont
titleField.size = 50
currentTop = currentTop + 28 + padding
– Saving and Loading functions
function loadSavedNote()
inputsearch = titleField.text
g:remove(myList)
createList()
g:insert(myList)
end
detailScreen.x = display.contentWidth
–setup the table
local data = tabledata.data --note: the declaration of this variable was moved up higher to broaden its scope
–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed
–setup functions to execute on touch of the list view items
function listButtonRelease( event )
self = event.target
local id = self.id
print(self.id)
local detailBg = display.newImage(data[id].fullpage)
detailScreen:insert(detailBg)
– detailScreenText.text = "You tapped "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
transition.to(myList, {time=400, x=-850, transition=easing.outExpo })
transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=1 })
delta, velocity = 0, 0
end
end
function backBtnRelease( event )
print(“back button released”)
transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(detailScreen, {time=400, x=display.contentWidth+50, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=0 })
delta, velocity = 0, 0
end
–setup each row as a new table, then add title, subtitle, and image
–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[i])
end
local headers = inputsearch
local topBoundary = display.screenOriginY + 85
local bottomBoundary = display.screenOriginY + 189
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
–default=“listItemBg_white.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
cat=“title”,
order=headers,
categoryBackground=“catBg.png”,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
callback = function( row )
local g = display.newGroup()
local img = display.newImage(row.image)
g:insert(img)
img.x = math.floor(img.width*0.5 + 1)
img.y = math.floor(img.height*0.5)
local title = display.newText( row.title, 0, 0, native.systemFontBold, 24 )
title:setTextColor(0, 0, 0)
–title:setTextColor(255, 255, 255)
g:insert(title)
title.x = title.width*0.5 + img.width + 6
title.y = 30
local subtitle = display.newText( row.subtitle, 0, 0, native.systemFont, 20 )
subtitle:setTextColor(80,80,80)
–subtitle:setTextColor(180,180,180)
g:insert(subtitle)
subtitle.x = subtitle.width*0.5 + img.width + 15
subtitle.y = title.y + title.height + 6
local subtitle2 = display.newText( row.subtitle2, 0, 0, native.systemFont, 20 )
subtitle2:setTextColor(80,80,80)
–subtitle:setTextColor(180,180,180)
g:insert(subtitle2)
subtitle2.x = subtitle2.width*0.5 + img.width + 15
subtitle2.y = title.y + title.height + 30
local origin = display.newText( row.origin, 0, 0, native.systemFont, 20 )
origin:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(origin)
origin.x = origin.width*0.5 + img.width + 30
origin.y = title.y + title.height + 80
local bprice = display.newText( row.bprice, 0, 0, native.systemFontBold, 20 )
bprice:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(bprice)
bprice.x = bprice.width*0.5 + img.width + 400
bprice.y = title.y + title.height + 80
local gprice = display.newText( row.gprice, 0, 0, native.systemFontBold, 20 )
gprice:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(gprice)
gprice.x = gprice.width*0.5 + img.width + 400
gprice.y = title.y + title.height + 55
return g
end
}
function createList()
– create the list of items
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
–default=“listItemBg_white.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
cat=“title”,
order=headers,
categoryBackground=“catBg.png”,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
callback = function( row )
local g = display.newGroup()
local isFiltered = false
local filterText = inputsearch
if( filterText ~= “” ) then – Don’t filter if filterText is empty.
if( string.find(string.lower( row.title ) , string.lower( filterText )) ) then
isFiltered = false – Don’t filter this one out, we found the string.
else
isFiltered = true – Filter it out, search term is not in the string.
end
end
if( isFiltered == false ) then
– Now we add the row to the tableview, if not filtered
local img = display.newImage(row.image)
g:insert(img)
img.x = math.floor(img.width*0.5 + 1)
img.y = math.floor(img.height*0.5)
local title = display.newText( row.title, 0, 0, native.systemFontBold, 24 )
title:setTextColor(0, 0, 0)
–title:setTextColor(255, 255, 255)
g:insert(title)
title.x = title.width*0.5 + img.width + 6
title.y = 30
local subtitle = display.newText( row.subtitle, 0, 0, native.systemFont, 20 )
subtitle:setTextColor(80,80,80)
–subtitle:setTextColor(180,180,180)
g:insert(subtitle)
subtitle.x = subtitle.width*0.5 + img.width + 15
subtitle.y = title.y + title.height + 6
local subtitle2 = display.newText( row.subtitle2, 0, 0, native.systemFont, 20 )
subtitle2:setTextColor(80,80,80)
–subtitle:setTextColor(180,180,180)
g:insert(subtitle2)
subtitle2.x = subtitle2.width*0.5 + img.width + 15
subtitle2.y = title.y + title.height + 30
local origin = display.newText( row.origin, 0, 0, native.systemFont, 20 )
origin:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(origin)
origin.x = origin.width*0.5 + img.width + 30
origin.y = title.y + title.height + 80
local bprice = display.newText( row.bprice, 0, 0, native.systemFontBold, 20 )
bprice:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(bprice)
bprice.x = bprice.width*0.5 + img.width + 400
bprice.y = title.y + title.height + 80
local gprice = display.newText( row.gprice, 0, 0, native.systemFontBold, 20 )
gprice:setTextColor(0,0,0)
–subtitle:setTextColor(180,180,180)
g:insert(gprice)
gprice.x = gprice.width*0.5 + img.width + 400
gprice.y = title.y + title.height + 55
return g
end
end
}
end
local function scrollToTop()
myList:scrollTo(topBoundary-1)
end
–Setup the nav bar
–Setup Navbar
local navBar = ui.newButton{
default = “navBar.png”,
onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
local navHeader = display.newText("", 0, 0, native.systemFontBold, 40)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y +20
–Setup the back button
backBtn = ui.newButton{
default = “backButton.png”,
over = “backButton_over.png”,
onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y + 15
backBtn.alpha = 0
backBtn.xScale = .70
backBtn.yScale = .70
–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,180)
g:insert(detailScreen)
g:insert(myList)
myList:insert(1,listBackground)
g:insert(navBar)
g:insert(navHeader)
g:insert(backBtn)
g:insert(titleField)
navBar.xScale = 6
navBar.yScale = 3
–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”
–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1
–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end
function g:cleanUp()
g:removeSelf()
end
return g
end
new()
[/code] [import]uid: 77043 topic_id: 35930 reply_id: 335930[/import]